vue项目的vue.config.js配置

1、首先 创建vue.config.js文件：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

module.exports={   lintOnSave: false,   transpileDependencies: true,   publicPath: process.env.VUE_APP_OUTPUT_DIR,//生成目录的文件名。   outputDir: process.env.VUE_APP_ROUTER_URL, //生产环境构建文件的目录   assetsDir: '',//输出的静态资源目录名 没有默认放到根目录下  static   productionSourceMap: false,   devServer: {     compress: true,     hot: true, 、、热更新     port: 8080,//端口号     proxy: { //配置多个跨域       '/api1': {         target: ******, //跨域到的地址         secure: BASE_URL.includes('https') ? false : true,         changeOrigin: true,        pathRewrite: { "^/api": "/" }       },       '/api2': {         target: *****,         changeOrigin: true,         secure: BASE_URL.includes('https') ? false : true,       }     }   }, }

　　

2、配置图片或者路径别名， 有两种方式。（chainWebpack 和 configureWebpack）

• 第一种方式---------configureWebpack

 

  configureWebpack: (config) => {
    config.resolve = {
      ...config.resolve,
      alias: {
        "@": resolve("src"),
        "api": resolve("src/api"),
        "img": resolve("src/assets"),
      },
      fallback: { path: require.resolve('path-browserify') }, //否则会找不到path路径
    }
}

 

• 第二种方式-------chainWebpack  

 chainWebpack: config => {
        config.resolve.alias // 添加别名
            .set('@', resolve('src'))
            .set('@assets', resolve('src/assets'))
    }
}

3、buffer对象不可使用, 在webpack5中移除了nodejs核心模块的polyfill自动引入，所以需要手动引入，对于Buffer这种全局变量还是要自动引入。

plugins配置 new webpack.ProvidePlugin({ Buffer: ["buffer", "Buffer"] })

?

1 2 3 4 5

config.plugins=[new webpack.ProvidePlugin({ Buffer: ["buffer", "Buffer"] })]   或者    config.plugins.push(new webpack.ProvidePlugin({ Buffer: ["buffer", "Buffer"] }))

4、根据不同环境做不同配置：

备注：如果所有配置和插件不区分环境的话，那么启动会很慢。

const IS_PROD = '*****';
if (IS_PROD) { // 为生产环境修改配置...
      config.plugins.push(
        // 压缩js代码
        new UglifyJsPlugin({
          uglifyOptions: {
            warnings: false,
            compress: {
              drop_debugger: true,
              drop_console: true,  //删除console
            }
          },
          sourceMap: false,
          cache: true,
          parallel: true //使用多进程并行运行来提高构建速度
        }),
        //压缩gzip
        new CompressionPlugin({
          algorithm: 'gzip',
          test: new RegExp(
            '\\.(' + ['js', 'css'].join('|') + ')$'
          ),
          threshold: 10240,
          minRatio: 0.8
        }),
        //压缩css
        new CssMinimizerWebpackPlugin(),
      )
    }

 5、图片引用过svg的话需要配置plugins  svg-sprite-loader  

chainWebpack: (config) => {
       //配置svg的引入
    config.module.rule('svg').exclude.add(path.join(__dirname, 'src/icons')).end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(path.join(__dirname, 'src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
}

 

 6、配置一些文件打包的方式

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

chainWebpack: (config) => {    if (IS_PROD) {       //element-ui       config.optimization.splitChunks({         chunks: 'all',         cacheGroups: {           libs: {             name: 'chunk-libs',             test: /[\\/]node_modules[\\/]/,             priority: 10,             chunks: 'initial' // 只打包初始时依赖的第三方           },           elementUI: {             name: 'chunk-elementUI', // 单独将 elementUI 拆包             priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app             test: /[\\/]node_modules[\\/]element-ui[\\/]/           },           commons: {             name: 'chunk-commons',             test: resolve('src/components'), // 可自定义拓展你的规则             minChunks: 3, // 最小公用次数             priority: 5,             reuseExistingChunk: true           },           styles: {             name: 'styles',             test: m => m.constructor.name === 'CssModule',             chunks: 'all',             minChunks: 2,             minSize: 30000,             enforce: true           }         }       })     } }

7、 configureWebpack方式：函数式和对象式

• 函数式

configureWebpack: (config)=>{
// 例如，通过判断运行环境，设置mode
    config.mode = 'production'
//设置插件
    config.plugins=[]

}

• 对象式

configureWebpack: {
    rules:[], //规则
    plugins: [] //插件
  }

8、chainWepack方式：对象式和函数式

（关于插件plugins）

 chainWebpack: (config) => {
        // 新增一个`hot-hash-webpack-plugin`
        // 注意：这里use的时候不需要使用`new HotHashWebpackPlugin()`
        config.plugin('hotHash')
              .use(HotHashWebpackPlugin, [{ version: '1.0.0' }]);
    }

（修改别名）

config.resolve.alias
        .set('@', resolve('src')) 
        .set('api', resolve('src/apis'))
        .set('common', resolve('src/common'))