常见vue-cli基础配置（可自行扩展）

简介

日常vue开发过程中，为了工程化管理以及优化打包等，我们需要去配置vue项目。

vue-cli3后，一般常见于在根目录（与src同级下）创建vue.config.js进行相关配置。

虽然版本不断迭代，但是仍然可以先沉淀出自己一套基础配置，以供日常快速构建项目，并进行定制化扩展。

下面分享一下一套比较基础的配置：

vue.config.js

 const path = require('path')
 const webpack = require('webapck')
 conost TerserPlugin = require('terser-webpack-plugin')
 const CompressionWebpackPlugin = require()

 const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV)
 const resolve = dir => path.join(__dirname, dir)
 const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i

 module.exports = {
     publicPath: '',
     outputDir: path.resolve(__dirname, '..', process.env.outputDir + '/static'),
     indexPath: path.resolve(__dirname, '..', process.env.outputDir + '/static/index.html'),
     lintOnSave: true, // 设置每次保存都进行eslint验证
     // runtimeCompiler: true, // 是否使用包含运行时编译器的vue构建版本，就是可用template,与render,runtime-only则只能render，虽然灵活，但是体积会变大。
     productionSourceMap: !IS_PROD, // 生产环境sourceMap
     chainWebpack: config => {
         // config.resolve.symlinks(true) // 修复热更新
         // 删除moment除zh-cn中文包外的其他语言包，无需在代码中手动引入zh-cn语言包
         config
             .plugin('ignore')
             .use(new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn$/))
     },
     configureWebpack: config => {
         if (IS_PROD) {
             config.plugins.push(
                 new TerserPlugin({ // 去除console 无需安装，默认自带
                         terserOptions: {
                             warnings: false,
                             format: { comments: false },
                             compress: {
                                 drop_debugger: true, // 注释console
                                 drop_console: true, 
                                 pure_funcs: ['console.loog'] // 移除console\
                             }
                         },
                         extractComments: false, // 是否将注释提取到一个单独的文件中
                         parallel: true
                     }),
                 new CompressionWebpackPlugin({ // 开启gzip
                     filename: '[path].gz[query]',
                     algoithm: 'gzip',
                     test: productionGzipExtensions,
                     threshold: 10240,
                     minRatio: 0.8
                 })
             )
         }
     },
     css: {
         loaderOptions: {
             less: { javascriptEEnabled: true }
         }
     },
     devServer: {
         port: '3005',
         overlay: { // 当出现编译器错误或警告时，在浏览器显示全屏覆盖层，默认禁用
             warnings: true,
             errors: true
         },
         compress: true, // 对devServer所有服务启动gzip压缩
         open: true,
         hot: true,
         hotOnly: false,
         proxy: { // 配置proxy解决跨域问题
             '/api': {
                 target: 'http://localhost:3000',
                 changeOrigin: true, // 是否允许跨域，即将主机头的来源更换成目标URL
                 pathRewrite: {
                     '/api': '/' // 重写
                 },
                 ws: true, // 是否代理websocket
                 secure: false // 是否使用http协议，默认false
             }
         }
     }
 }

结尾

文章中可能包含实现有问题或者不够充分的情况，欢迎大家在评论区指出，一定马不停蹄地改正，拜谢。