vue-cli3 vue-config.js配置

　　两个月前，由于个人之前用的不是图形化界面的，所以对于许多的配置，变成了，额，怎么这个不能配了，我想要之前webpack可配置的一些插件，于是百度了一番，综合项目使用了，如下配置，算是对这些东西的一个记录

  1 const path = require('path')
  2 const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
  3 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
  4 const CompressionWebpackPlugin = require('compression-webpack-plugin');
  5 const productionGzipExtensions = ['js', 'css']
  6 const BrotliPlugin = require("brotli-webpack-plugin");
  7 const apibaseUrl ="http://a.ab.cn:83/aaaa"
  8  
  9 function resolve(dir) {
 10     return path.join(__dirname, dir)
 11 }
 12 module.exports = {
 13     baseUrl: '/vue_dist/app/',
 14     devServer: {
 15         proxy: {
 16             '/vue_dist/api': {
 17                 target: `${apibaseUrl}/api`,
 18                 pathRewrite: { '^/vue_dist/api': '' },
 19             },
 20            
 21         }
 22     },
 23     //生产环境构建文件的目录
 24     outputDir:"dist",
 25     assetsDir:'assets',
 26     //生产环境是否生成SourceMap
 27     productionSourceMap: true,
 28     // 是否使用包含运行时编译器的 Vue 构建版本
 29     runtimeCompiler: true,
 30     parallel: require('os').cpus().length > 1,
 31     // css相关配置
 32     css: {
 33     // 是否使用css分离插件 ExtractTextPlugin
 34     extract: IS_PROD?true:false,
 35     // 开启 CSS source maps?
 36     sourceMap:IS_PROD?false:true,
 37     // css预设器配置项
 38     loaderOptions: {},
 39     // 启用 CSS modules for all css / pre-processor files.
 40     modules: false
 41     },
 42 
 43     configureWebpack: config => {
 44         //生产环境去掉console 和 debugger
 45         //压缩代码减少文件体积    
 46         if (IS_PROD) {  
 47             const plugins = [];
 48             plugins.push(
 49                 new UglifyJsPlugin({
 50                 uglifyOptions: {
 51                     compress: {
 52                     warnings: false,
 53                     drop_console: true,
 54                     drop_debugger: true,//移除debugger
 55                     pure_funcs: ['console.log']//移除console
 56                     }
 57                 },
 58                 sourceMap: false,
 59                 parallel: true
 60                 })
 61             );
 62             plugins.push(
 63                 new CompressionWebpackPlugin({
 64                 filename: '[path].gz[query]',
 65                 algorithm: 'gzip',
 66                 test: productionGzipExtensions,
 67                 threshold: 10240,
 68                 minRatio: 0.8
 69                 })
 70             );
 71             // Zopfli压缩 https://webpack.js.org/plugins/compression-webpack-plugin/
 72             /* plugins.push(
 73             new CompressionWebpackPlugin({
 74                 algorithm(input, compressionOptions, callback) {
 75                 return zopfli.gzip(input, compressionOptions, callback);
 76                 },
 77                 compressionOptions: {
 78                 numiterations: 15
 79                 },
 80                 minRatio: 0.99,
 81                 test: productionGzipExtensions
 82             })
 83             );
 84             plugins.push(
 85             new BrotliPlugin({
 86                 test: productionGzipExtensions,
 87                 minRatio: 0.99
 88             })
 89             );
 90 */

　　　　　　　 config.plugins = [
 91                 ...config.plugins,
 92                 ...plugins
 93             ];


 94         }
 95     },
 96     chainWebpack: config => {
 97         // 修复HMR
 98         config.resolve.symlinks(true)
 99         //配置别名
100         config.resolve.alias
101             .set("@", resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
102         if (IS_PROD) {
103             // 生产环境配置
104             
105         } else {
106             //开发环境配置
107         
108         }
109     }
110     
111 }

 

posted @ 2019-06-27 09:33  文学少女  阅读(1120)  评论(0)  编辑  收藏  举报