Vue CLI4 Vue.config.js标准配置(最全注释)
前言：
Vue.jsCLI工具不知不觉发展到了4.0时代，CLI给人最直白的感受是没有了build文件夹跟config文件夹，所有的配置都在Vue.config.js完成。那么该文件的配置至关重要。现在我们来看一下最新配置是怎么配置的。
安装
npmi-dvue-cli-configjs
//vue.config.js
constpath=require('path');
constCompressionWebpackPlugin=require("compression-webpack-plugin");//开启gzip压缩，按需引用
constproductionGzipExtensions=/\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;//开启gzip压缩，按需写入
constBundleAnalyzerPlugin=require("webpack-bundle-analyzer").BundleAnalyzerPlugin;//打包分析
constIS_PROD=['production','prod'].includes(process.env.NODE_ENV);
constresolve=(dir)=>path.join(__dirname,dir);
module.exports={
publicPath:process.env.NODE_ENV==='production'?'/site/vue-demo/':'/',//公共路径
indexPath:'index.html',//相对于打包路径index.html的路径
outputDir:process.env.outputDir||'dist',//'dist',生产环境构建文件的目录
assetsDir:'static',//相对于outputDir的静态资源(js、css、img、fonts)目录
lintOnSave:false,//是否在开发环境下通过eslint-loader在每次保存时lint代码
runtimeCompiler:true,//是否使用包含运行时编译器的Vue构建版本
productionSourceMap:!IS_PROD,//生产环境的sourcemap
parallel:require("os").cpus().length>1,//是否为Babel或TypeScript使用thread-loader。该选项在系统的CPU有多于一个内核时自动启用，仅作用于生产构建。
pwa:{},//向PWA插件传递选项。
chainWebpack:config=>{
config.resolve.symlinks(true);//修复热更新失效
//如果使用多页面打包，使用vueinspect--plugins查看html是否在结果数组中
config.plugin("html").tap(args=>{
//修复LazyloadingroutesError
args[0].chunksSortMode="none";
returnargs;
});
config.resolve.alias//添加别名
.set('@',resolve('src'))
.set('@assets',resolve('src/assets'))
.set('@components',resolve('src/components'))
.set('@views',resolve('src/views'))
.set('@store',resolve('src/store'));
//压缩图片
//需要npmi-Dimage-webpack-loader
config.module
.rule("images")
.use("image-webpack-loader")
.loader("image-webpack-loader")
.options({
mozjpeg:{progressive:true,quality:65},
optipng:{enabled:false},
pngquant:{quality:[0.65,0.9],speed:4},
gifsicle:{interlaced:false},
webp:{quality:75}
});
//打包分析,打包之后自动生成一个名叫report.html文件(可忽视)
if(IS_PROD){
config.plugin("webpack-report").use(BundleAnalyzerPlugin,[
{
analyzerMode:"static"
}
]);
}
},
configureWebpack:config=>{
//开启gzip压缩
//需要npmi-Dcompression-webpack-plugin
constplugins=[];
if(IS_PROD){
plugins.push(
newCompressionWebpackPlugin({
filename:"[path].gz[query]",
algorithm:"gzip",
test:productionGzipExtensions,
threshold:10240,
minRatio:0.8
})
);
}
config.plugins=[...config.plugins,...plugins];
},
css:{
extract:IS_PROD,
requireModuleExtension:false,//去掉文件名中的.module
loaderOptions:{
//给less-loader传递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":"/"
}
},
}
}
}
结语
上述代码可以直接复制，也可以按需引入，一般都用的到，注意里面需要安装的依赖。
cnpminstall--save-devcompression-webpack-plugin
cnpminstall--save-devimage-webpack-loader
到此这篇关于VueCLI4Vue.config.js标准配置(最全注释)的文章就介绍到这了,更多相关Vue.config.js标准配置内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！,希望大家以后多多支持毛票票！