Vue。jsCLI4Vue。config。js标准配置（最全

　　前言：
　　Vue。jsCLI工具不知不觉发展到了4。0时代，CLI给人最直白的感受是没有了build文件夹跟config文件夹，所有的配置都在Vue。config。js完成。那么该文件的配置至关重要。现在我们来看一下最新配置是怎么配置的。
　　有三种方式，推荐第二种标准版（无需安装依赖，直接复制即可配置）。
　　1、依赖库
　　npminstallvuecliconfigjs
　　2、标准版
　　vue。config。js
　　constpathrequire（path）；
　　constISPROD〔production，prod〕。includes（process。env。NODEENV）；
　　constresolve（dir）path。join（dirname，dir）；
　　module。exports｛
　　publicPath：process。env。NODEENVproduction？sitevuedemo：，公共路径
　　indexPath：index。html，相对于打包路径index。html的路径
　　outputDir：process。env。outputDirdist，dist，生产环境构建文件的目录
　　assetsDir：static，相对于outputDir的静态资源（js、css、img、fonts）目录
　　lintOnSave：false，是否在开发环境下通过eslintloader在每次保存时lint代码
　　runtimeCompiler：true，是否使用包含运行时编译器的Vue构建版本
　　productionSourceMap：！ISPROD，生产环境的sourcemap
　　parallel：require（os）。cpus（）。length1，是否为Babel或TypeScript使用threadloader。该选项在系统的CPU有多于一个内核时自动启用，仅作用于生产构建。
　　pwa：｛｝，向PWA插件传递选项。
　　chainWebpack：config｛
　　config。resolve。symlinks（true）；修复热更新失效
　　如果使用多页面打包，使用vueinspectplugins查看html是否在结果数组中
　　config。plugin（html）。tap（args｛
　　修复LazyloadingroutesError
　　args〔0〕。chunksSortModenone；
　　returnargs；
　　｝）；
　　config。resolve。alias添加别名
　　。set（，resolve（src））
　　。set（assets，resolve（srcassets））
　　。set（components，resolve（srccomponents））
　　。set（views，resolve（srcviews））
　　。set（store，resolve（srcstore））；
　　｝，
　　css：｛
　　extract：ISPROD，
　　requireModuleExtension：false，去掉文件名中的。module
　　loaderOptions：｛
　　给lessloader传递Less。js相关选项
　　less：｛
　　globalVars定义全局对象，可加入全局变量
　　globalVars：｛
　　primary：333
　　｝
　　｝
　　｝
　　｝，
　　devServer：｛
　　overlay：｛让浏览器overlay同时显示警告和错误
　　warnings：true，
　　errors：true
　　｝，
　　host：localhost，
　　port：8080，端口号
　　https：false，https：｛type：Boolean｝
　　open：false，配置自动启动浏览器
　　hotOnly：true，热更新
　　proxy：http：localhost：8080配置跨域处理，只有一个代理
　　proxy：｛配置多个跨域
　　api：｛
　　target：http：172。11。11。11：7071，
　　changeOrigin：true，
　　ws：true，websocket支持
　　secure：false，
　　pathRewrite：｛
　　api：
　　｝
　　｝，
　　api2：｛
　　target：http：172。12。12。12：2018，
　　changeOrigin：true，
　　ws：true，websocket支持
　　secure：false，
　　pathRewrite：｛
　　api2：
　　｝
　　｝，
　　｝
　　｝
　　｝
　　3、升级版
　　vue。config。js
　　constpathrequire（path）；
　　constCompressionWebpackPluginrequire（compressionwebpackplugin）；开启gzip压缩，按需引用
　　constproductionGzipExtensions。（jscssjsontxthtmlicosvg）（？。）？i；开启gzip压缩，按需写入
　　constBundleAnalyzerPluginrequire（webpackbundleanalyzer）。BundleAnalyzerPlugin；打包分析
　　constISPROD〔production，prod〕。includes（process。env。NODEENV）；
　　constresolve（dir）path。join（dirname，dir）；
　　module。exports｛
　　publicPath：process。env。NODEENVproduction？sitevuedemo：，公共路径
　　indexPath：index。html，相对于打包路径index。html的路径
　　outputDir：process。env。outputDirdist，dist，生产环境构建文件的目录
　　assetsDir：static，相对于outputDir的静态资源（js、css、img、fonts）目录
　　lintOnSave：false，是否在开发环境下通过eslintloader在每次保存时lint代码
　　runtimeCompiler：true，是否使用包含运行时编译器的Vue构建版本
　　productionSourceMap：！ISPROD，生产环境的sourcemap
　　parallel：require（os）。cpus（）。length1，是否为Babel或TypeScript使用threadloader。该选项在系统的CPU有多于一个内核时自动启用，仅作用于生产构建。
　　pwa：｛｝，向PWA插件传递选项。
　　chainWebpack：config｛
　　config。resolve。symlinks（true）；修复热更新失效
　　如果使用多页面打包，使用vueinspectplugins查看html是否在结果数组中
　　config。plugin（html）。tap（args｛
　　修复LazyloadingroutesError
　　args〔0〕。chunksSortModenone；
　　returnargs；
　　作者：MonkeySoft
　　篇幅有限更多请见扩展链接：http：www。marktowin。comtutorial50778。html