vue cli配置详解,vue config配置
本文主要介绍@vue/cli4.x版vue.config.js的常用配置方法，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
@vue/cli4.x常用配置vue-cli4.js. *配置vue.config.js文件的配置内容无效。解决。
@vue/cli4.x的vue.config.js常用配置
设置接入端口号、接入IP地址、跨域代理和路径别名。
const path=require(path )
const compression plugin=require( compression-web pack-plugin )//compression-web pack-plugin插件需要安装npm。
函数解析(目录){
返回path.join(__dirname，dir)
}
模块.导出={
////关闭eslint验证，建议在项目开发中开启。这个只有在特殊情况下方便测试的时候才关闭。
//devServer: {
//覆盖：{
//warining: true，
//错误：true，
//},
//},
//lintOnSave: false，
//部署应用包时配置基本URL(如果发现服务器上的静态资源路径请求错误，必要时可以修改)
//public path:process . ENV . node _ ENV=== production
//?/winne-test/
//: /
LintOnSave: error ，//设置为当eslint报告错误时停止代码编译。
ProductionSourceMap: false，//不需要生产环境的源地图(减小dist文件大小，加快构建速度)
devServer: {
Open: true，//npm run serve运行serve后自动打开页面。
主机： 0.0.0.0 ，//匹配本地IP地址(默认为0.0.0.0)
端口：8989，//开发服务器的端口号
代理服务器：{
/api: {
target: 3358 www . example . com ，//代理接口地址
Secure: false，//如果是https接口，需要配置这个参数。
ChangeOrigin: true，//是跨域的吗？
路径重写：{
/api : //如果需要重写，这里理解为以/api 开头的接口地址，target中的地址替换为/API。
}
}
}
},
chainWebpack: (config)={
//删除预取插件(针对生产环境中第一个屏幕请求的数量进行优化)
config.plugins.delete(预取)
//删除预加载插件(针对生产环境中第一个屏幕请求的数量进行了优化)。预载插件的目的是：https://cli.vuejs.org/zh/guide/html-and-static-assets.html #预载
config.plugins.delete(“预加载”)
//第一个参数：alias，第二个参数：path(设置路径别名)
config.resolve .别名。set(@pages)，resolve(。/src/page ))。set(@router)，resolve(。/src/router ))。set(@store)，resolve(。/src/store ))。set(@utils ，resolve(。/src/utils ))
},
//配置打包的js和css文件。gz格式以优化加载速度(参考https://blog.csdn.net/qq_31677507/article/details/102742196)
configureWebpack: config={
if(process . ENV . node _ ENV=== production ){
返回{
插件：[新压缩插件({
测试：/\。js$\。css/，//匹配文件
阈值：10240，//超过10kB的数据将被压缩
DeleginalAssets:false//是否要删除原始文件(也建议将原始文件发布到服务器，以支持与gzip不兼容的浏览器)
})],
性能：{//如果生产环境生成代码文件超过以下配置大小，将在命令行上显示警告
提示：“警告”，
//入口起点最大音量的整数类型(以字节为单位，默认值为：250000(字节))
maxEntrypointSize: 5000000，
//生成文件最大容量的整数类型(以字节为单位，默认值为：250000(字节))
maxAssetSize: 3000000
////只给出js文件的性能提示
//asset filter:function(asset file name){
//返回assetFilename.endsWith(。js’)
//}
}
}
}
}
}
vue-cli4.*配置vue.config.js文件配置内容不生效
使用vue-cli时，系统会自动帮助我们进行一些常规配置。当我们需要自己定义一些配置的时候，只需要在项目的根目录下创建vue.config.js，然后在这个文件中添加配置即可。
但是在项目中发现，改变vue.config.js的内容并没有什么效果。
解决
每次更新vue.config.js时，停止热部署(npm run serve)，然后重新启动服务。
目录结构：
vue.config.js配置示例：
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。