vue-cli3 vue-config.js配置

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

const path = require('path') const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV); const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const CompressionWebpackPlugin = require('compression-webpack-plugin'); const productionGzipExtensions = ['js', 'css'] const BrotliPlugin = require("brotli-webpack-plugin"); const apibaseUrl ="http://a.ab.cn:83/aaaa"   function resolve(dir) {     return path.join(__dirname, dir) } module.exports = {     baseUrl: '/vue_dist/app/',     devServer: {         proxy: {             '/vue_dist/api': {                 target: `${apibaseUrl}/api`,                 pathRewrite: { '^/vue_dist/api': '' },             },                     }     },     //生产环境构建文件的目录     outputDir:"dist",     assetsDir:'assets',     //生产环境是否生成SourceMap     productionSourceMap: true,     // 是否使用包含运行时编译器的 Vue 构建版本     runtimeCompiler: true,     parallel: require('os').cpus().length > 1,     // css相关配置     css: {     // 是否使用css分离插件 ExtractTextPlugin     extract: IS_PROD?true:false,     // 开启 CSS source maps?     sourceMap:IS_PROD?false:true,     // css预设器配置项     loaderOptions: {},     // 启用 CSS modules for all css / pre-processor files.     modules: false     },
    configureWebpack: config => {         //生产环境去掉console 和 debugger         //压缩代码减少文件体积             if (IS_PROD) {               const plugins = [];             plugins.push(                 new UglifyJsPlugin({                 uglifyOptions: {                     compress: {                     warnings: false,                     drop_console: true,                     drop_debugger: true,//移除debugger                     pure_funcs: ['console.log']//移除console                     }                 },                 sourceMap: false,                 parallel: true                 })             );             plugins.push(                 new CompressionWebpackPlugin({                 filename: '[path].gz[query]',                 algorithm: 'gzip',                 test: productionGzipExtensions,                 threshold: 10240,                 minRatio: 0.8                 })             );             // Zopfli压缩 https://webpack.js.org/plugins/compression-webpack-plugin/             /* plugins.push(             new CompressionWebpackPlugin({                 algorithm(input, compressionOptions, callback) {                 return zopfli.gzip(input, compressionOptions, callback);                 },                 compressionOptions: {                 numiterations: 15                 },                 minRatio: 0.99,                 test: productionGzipExtensions             })             );             plugins.push(             new BrotliPlugin({                 test: productionGzipExtensions,                 minRatio: 0.99             })             );             config.plugins = [                 ...config.plugins,                 ...plugins             ]; */         }     },     chainWebpack: config => {         // 修复HMR         config.resolve.symlinks(true)         //配置别名         config.resolve.alias             .set("@", resolve('src')) // key,value自行定义,比如.set('@@', resolve('src/components'))         if (IS_PROD) {             // 生产环境配置                      } else {             //开发环境配置                  }     }      }
上一篇:VUE CLI3.X 创建项目


下一篇:java – 当使用Batik的SVGGraphics2D时,如何设置font-family而不是font?