vue项目的vue.config.js配置

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

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"] })

 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、配置一些文件打包的方式

  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'))