Vue2 项目小技巧

生产环境去除 console.log

1. 安装webpack插件 uglifyjs-webpack-plugin （https://www.npmjs.com/package/uglifyjs-webpack-plugin）

2. 项目build 下面webpack.prod.config.js 文件中:

plugins: [
    new webpack.DefinePlugin({
      'process.env': env
    }),
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          dead_code: true, // 去除不可达代码
          drop_console: true, //drop_console  传递true以放弃对控制台的调用。*功能
          pure_funcs: ['console.log'] // pure_funces 禁用console.log函数
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
]

条件编译修改Favicon图标

1.项目build 下面webpack.prod.config.js 文件中

// 添加如下代码
function getFavicon(){
  // favicon 自定义配置
  if(baseWebpackConfig.BRANCH_ENV === "XXX"){
    return 'src/assets/images/XXX.ico'
  }else if (baseWebpackConfig.BRANCH_ENV === "XX"){
    return 'src/assets/images/XX.ico'
  }else if(baseWebpackConfig.BRANCH_ENV === "X"){
    return 'src/assets/images/X.ico'
  }
}

const webpackConfig = merge(baseWebpackConfig, {
  module: {
    /*
      在utils.js已经配置好相关对extractTextPlugin的css抽取配置.通过extract: true即可触发

      如果要触发这个 extract 需要在plugins里面注册一下
    */
    ....
   },
   plugins: [
    ...
    new HtmlWebpackPlugin({
      // 生成html的名称
      filename: config.build.index,
      template: 'index.html',

      favicon:getFavicon(),

      // 这个配置项指js文件插入的位置
      // inject: true,
      // 额外的精简配置项
      // minify: {
      // 删去html中的注释项
      //   removeComments: true,
      // 折叠html中的空白字符
      //   collapseWhitespace: true,
      // 删去不必要的属性
      //   removeAttributeQuotes: true
      //   // more options:
      //   // https://github.com/kangax/html-minifier#options-quick-reference
      // },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      // 控制生成的js插入位置的顺序(可以结合chunks进行选择)
      chunksSortMode: 'dependency',
      //修改：这里的common.js 是在 webpack.base.conf.js中做了代码切分所使用的名称
      // chunks:['manifest','vendor','common.js','app']
    }),
    ...
   ]
    

VUE项目条件编译

1.安装条件编译模块

npm i -D js-conditional-compile-loader

2.配置webpack

// webpack.base.conf.js文件中在rules配置编译条件如下
...
module: {
    rules: [
        {
	        test: /\.vue$/,
	        use:[
	          {
	            loader: 'vue-loader',
	            options: vueLoaderConfig
	          },
	          {
	            loader: 'js-conditional-compile-loader',
	            options: {
	                // isDebug: process.env.NODE_ENV === 'development',
	                isDebug : true,
	                isTEST: process.env.npm_config_test,
	            }
	          },
	        ]
        },
        {
            test: /\.(css|js)(\?.*)?$/,
            loader: 'js-conditional-compile-loader',
            options: {
            	// isDebug: process.env.NODE_ENV === 'development',
	            isDebug: true,
	            isTEST: process.env.npm_config_test,
	        }
        },
        //other rules
		...
    ]

}

3.项目中使用

//插件支持IFDEBUG和IFTRUE两个条件编译指令
//在js代码的任意地方以/*IFDEBUG或/*IFTRUE_xxx开头
//以FIDEBUG*/或FITRUE_xxx*/结尾
//中间是被包裹的js代码。xxx是在webpack中指定的条件属性名，如上面的isTEST。

{ name: '用户部门', value: 'usrDepartId' },
/* IFTRUE_isTEST */
{ name: '用户管理', value: 'id' },
/* FITRUE_isTEST */
{ name: '手机号', value: 'telphone' },

4.编译执行

## 可以看到用户管理
在终端输入 npm run dev –test

## 隐藏用户管理
在终端输入 npm run dev