一、vueconfig的配置详解
在Vue项目中,config文件夹位于项目根目录下,用于配置项目的各种参数。Vue CLI会自动加载并使用config文件夹中的配置文件。config文件夹中会有两个文件:dev.env.js和prod.env.js。
dev.env.js:开发环境下的配置文件,包含开发环境下所需要的配置参数。prod.env.js:生产环境下的配置文件,包含生产环境下所需要的配置参数。在这两个文件中,会有一个基础的配置文件:index.js。index.js文件会被同时加载到开发环境和生产环境中,也是Vue项目中的核心配置文件。
index.js中的配置包括webpack和dev-server等相关的配置,但需要注意的是,config文件夹中的配置不能直接在Vue组件中使用,如果想要在组件中使用这些配置,可以使用webpack的DefinePlugin插件来实现。
二、vue项目config配置代理
在Vue项目中,config文件夹中的index.js文件中,有一个devServer属性,可以用来配置dev-server的相关参数,其中最常用的就是proxy属性。proxy属性可以将某些URL请求代理到另外一个地址,常用于解决跨域请求的问题。
以下是一个代理API请求的示例:
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
- target:代理的目标地址
- changeOrigin:将主机标头的来源更改为目标URL
- pathRewrite:将代理的请求路径重写为没有/api路径的URL
三、vue项目config配置
在Vue项目中,config文件夹中的index.js文件中,有各种参数可以配置。以下介绍几种常见的配置方式:
1. 配置别名
通过配置别名可以在代码中更加方便地使用一些文件或者目录,例如src文件夹下面的components, assets, views等目录。
resolve: {
alias: {
'@': resolve('src'),
'assets': resolve('src/assets'),
'components': resolve('src/components'),
'views': resolve('src/views')
}
},
2. 配置端口号
可以通过配置端口号来改变dev-server的默认端口号,以下示例将端口号配置为8080。
port: 8080
3. 配置打包生成文件路径
配置打包生成文件的路径,可以通过outputDir属性来配置,以下示例指定打包生成文件的路径为dist目录。
outputDir: 'dist'
4. 配置CDN加速
可以通过配置externals属性,将一些较大的依赖库引入CDN来加速网页的加载速度。
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'axios': 'axios',
'element-ui': 'ELEMENT'
},
5. 配置图片压缩
可以通过配置image-webpack-loader、url-loader来压缩图片。
chainWebpack: (config) => {
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
bypassOnDebug: true
})
.end()
}
module.exports = {
chainWebpack: config => {
config.module
.rule('images')
.use('url-loader')
.loader('url-loader')
.tap(options => {
// 修改它的选项...
options.limit = 10000
return options
})
}
}
四、vue的config配置没有反应
在开发中,有时修改了Vue项目中config文件夹中的配置参数,发现更改没有生效,这可能是由于Vue项目已经被缓存的原因。可以通过以下步骤来清除Vue项目的缓存:
- 1. 关闭开发服务器
- 2. 删除项目根目录下的node_modules文件夹和package-lock.json文件
- 3. 在终端中输入npm cache clean --force命令,清除npm的缓存
- 4. 在终端中输入npm install命令,重新安装依赖库
- 5. 启动开发服务器
通过以上步骤,可以保证Vue项目的config文件夹中的配置参数生效。