[Vue] config.publicPath与BASE_URL

DiracKeeko

在vue项目中,与vue.config.js同级目录下会默认生成两个环境变量文件,.env 和 .env.development

image.png

在vue的默认配置中 npm run serve 默认环境变量NODE_ENV 是“development”,因此会加载.env.development中的环境变量。
而 npm run build 默认环境变量NODE_ENV 是 “production”,因此会加载.env中的环境变量

注意一个特殊的情况,环境变量.env文件(包括.env和.env.development以及其他.env文件)中的变量BASE_URL会被vue.config.js中 publicPath变量覆盖。

举例如下:

// .env
BASE_URL=’release/’
APP_BASE_URL=’app/release/’

// vue.config.js
module.exports = {
publicPath: ‘public/’
}

运行前端项目,打印BASE_URL和APP_BASE_URL
// main.js
console.log(process.env.BASE_URL) // ‘public/’ (被publicPath覆盖)
console.log(process.env.APP_BASE_URL) // ‘app/release/’

因此如果需要在根据环境不同分别自定义url(如用作axios的baseUrl) 就不要使用BASE_URL这个变量名,改用其他变量名如APP_BASE_URL。

同步更新在自己的语雀:
https://www.yuque.com/diracke...

阅读 3.6k
13 声望
1 粉丝
0 条评论
13 声望
1 粉丝
文章目录
宣传栏