zoukankan      html  css  js  c++  java
  • uniapp的vue.config.js的配置

    //重定向路径
    const path = require('path');
    
    function resolve (dir) {
      return path.join(__dirname, dir)
    }
    
    module.exports = {
      chainWebpack: (config) => {    
        config.resolve.alias
        .set('$css',resolve('/static/css'))
        .set('$common',resolve('/components'))
        .set('$api',resolve('/api'))
        .set('$page',resolve('/pages'))
        .set('$js',resolve('/static/js'));
      }
    };
    //删除打印
    module.exports = {
        chainWebpack: (config) => {
            // 发行或运行时启用了压缩时会生效
            config.optimization.minimizer('terser').tap((args) => {
                const compress = args[0].terserOptions.compress
                // 非 App 平台移除 console 代码(包含所有 console 方法,如 log,debug,info...)
                compress.drop_console = true
                compress.pure_funcs = [
                    '__f__', // App 平台 vue 移除日志代码
                    'console.log', // 可移除指定的 console 方法
    				'console.info', // 可移除指定的 console 方法
                ]
                return args
            })
        }
    };
    //简单配置方式1:
    
    //跟webpack的写法一样
    module.exports = {
      configureWebpack: {
        plugins: [
          new MyAwesomeWebpackPlugin()
        ]
      }
    }
    //简单配置方式2:
    //函数返回值,里面可以条件判断
    //生产环境和运行环境
    module.exports = {
      configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
          // 为生产环境修改配置...
    	  console.log("生产环境111")
        } else {
          // 为开发环境修改配置...
    	  console.log("开发环境222")
        }
      }
    };
    链式操作:
    
    可以类比以前webpack设置的方式,这种写法只不过换成链式操作而已。
    
    // vue.config.js
    module.exports = {
      chainWebpack: config => {
        config.module
          .rule('vue') 
          .use('vue-loader')
            .loader('vue-loader') 
            .tap(options => { // 设置处理的具体选项
              return options
            })
        
        config.module
          .rule('graphql') // 设置规则名称
          .test(/.graphql$/) // 设置筛选文件的规则
          .use('graphql-tag/loader')  // 使用处理文件的loader
            .loader('graphql-tag/loader') // 载入loader对文件进行处理
            .end()
          // 你还可以再添加一个 loader
          .use('other-loader')
            .loader('other-loader')
            .end()
      }
    }
    
  • 相关阅读:
    Javascript 面向对象编程
    __dirname与__filename
    解决动画播放完后恢复到初始状态的问题
    基于jQuery滚动加载页面内容效果的插件封装
    JQuery 方法
    CSS 尺寸介绍
    原生JS组件编写,构造函数封装步骤
    面试题原型链
    基础面试题——什么是盒子模型
    数组去重方法
  • 原文地址:https://www.cnblogs.com/axingya/p/15503574.html
Copyright © 2011-2022 走看看