vue中的config,vue项目的config文件夹
本文主要介绍如何在vueCli4中配置vue.config.js文件，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
vueCli4配置vue.config.jsvueCli4配置文件的路径别名，使用在项目根目录下创建的vue.config.js的配置文件。在配置文件中编写以下代码别名。
vueCli4配置vue.config.js
const path=require(path )
const compression plugin=require( compression-web pack-plugin )//Cnpm install-save-dev compression-web pack-plugin插件需要npm安装。
函数解析(目录){
返回path.join(__dirname，dir)
}
模块.导出={
公共路径：“”。/，//基本路径
OutputDir: dist ，//输出文件目录
AssetsDir: static ，//css js和其他静态文件目录
//lintOnSave: error ，//将代码编译设置为在eslint报告错误时停止。
lintOnSave:假的，
ProductionSourceMap: false，//不需要生产环境的源地图(减小dist文件大小，加快构建速度)
devServer: {
Open: true，//npm run serve运行serve后自动打开页面。
主机： 0.0.0.0 ，//匹配本地IP地址(默认为0.0.0.0)
端口：8989，//开发服务器的端口号
代理服务器：{
/api: {
target:process . env . vue _ app _ base _ URL，//代理接口地址
Secure: false，//如果是https接口，需要配置这个参数。
ChangeOrigin: true，//是跨域的吗？
路径重写：{
/api : //如果需要重写，这里理解为以/api 开头的接口地址，target中的地址替换为/API。
}
}
}
},
chainWebpack: (config)={
//删除预取插件(针对生产环境中第一个屏幕请求的数量进行优化)
config.plugins.delete(预取)
//删除预加载插件(针对生产环境中第一个屏幕请求的数量进行了优化)
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’)
//}
}
}
}
}
}
vueCli4配置文件路径别名及使用
在vue项目的开发中，我们经常需要导入不同的文件，然后需要设置文件的路径。只是利用。/.//导入文件，维护和修改都是相当麻烦的，所以我们需要熟悉文件的路径。
所以可以设置alias方便操作，然后不像cli2那样在脚手架cli4中自动生成一个webpack.base.config.js文件让我们直接写别名。所以需要我们自己去创造。步骤如下：
项目根目录下创建vue.config.js文件
与package.json相同的目录
配置文件中写入一下代码
//用来配置文件的别名，方便查找路径。
const path=require( path )；//引入路径模块
函数解析(目录){
Return path.join (_ _ dirname，dir)//path.join (_ _ dirname)设置绝对路径。
}
模块.导出={
chainWebpack:(config)={
config.resolve .别名
//设置第一个参数：设置别名，第二个参数：设置路径。set(“@”)，resolve(“。/src )//这要看目录的级别，也可以自己设置。设置(组件，解析(。/src/components ))。set(views)，resolve(。/src/views ))。设置( assets)，解析(。/src/assets ))
}
}
别名的使用
1:用于1:HTML-Dom:需要添加~
2:可以直接在2:css中使用
3.In 3:路由器路由配置：直接使用。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。