在vue的项目开发中，往往代码要在本地开发环境、测试环境、预发环境、生产环境等各种环境下执行，各个环境所对应的api接口地址也是不同的，如果每次打包都手动的修改接口地址，是很低效的，也是很容易出错的，如果在打包的时候忘记修改接口地址，后果也是很严重的。
写一个配置文件，可以根据环境的不同，自动切换接口地址是很有必要的。
在号称零配置的vue-cli3中，该如何配置呢？
在vue-cli3的项目中，
npm run serve时会把process.env.NODE_ENV设置为‘development’；
npm run build 时会把process.env.NODE_ENV设置为‘production’；
根据process.env.NODE_ENV设置不同请求url就可以区分出本地和线上环境。
但是，凡事最怕但是，但是实际开发过程中涉及到的环境可能不止这两种，还可能会有测试环境，预发环境和生产环境等等。
同样是执行npm run build，怎么手动更改process.env.NODE_ENV？
具体步骤如下： (以预发环境为例)
-
** package.json**的scripts中添加
"pre": "vue-cli-service build --mode pre" -
在项目根目录添加文件“.env.pre”，其内容：
NODE_ENV = 'pre'
是的，只写这一句就行了！
(命令中用到的mode，文章最后会讲到)
这样，npm run pre即打预发环境包，npm run build则打生产包
这主要得益于在 vue-cli 3.0.x 里面支持 “.env” 文件配置
通过改变process.env.NODE_ENV值区分打包环境，但是webpack打包时针对process.env.NODE_ENV===‘production’和其他情况打出来的包结构和大小都不一样；
怎么消除这种差异？
思路：原来是根据process.env.NODE_ENV的值来区分，能不能换个值作区分？
可以使用其他变量比如process.env.VUE_APP_TITLE来区分环境
与上面不同的是，.env.pre文件中的内容做一下修改：
NODE_ENV = 'production'
VUE_APP_TITLE = 'pre'
注意：NODE_ENV改成了production，将VUE_APP_TITLE的值置为了pre（只有VUE_APP_开头的环境变量可以在项目代码中直接使用）
只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中(即在项目代码中使用)。你可以在应用的代码中这样访问它们：
模式概念:
模式是 Vue CLI 项目中一个重要的概念。一般情况下 Vue CLI 项目有三个默认模式：
development模式用于vue-cli-service serve
production模式用于vue-cli-service build 和 vue-cli-service test:e2e
test模式用于vue-cli-service test:unit
模式不等同于 NODE_ENV，一个模式可以包含多个环境变量。也就是说，每个模式都将 NODE_ENV的值设置为模式的名称(可重新赋值更改)——比如在 development 模式下 NODE_ENV 的值会被设置为 “development”。
你可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量。比如，如果你在项目根目录创建一个名为 .env.development 的文件，那么在这个文件里声明过的变量就只会在 development 模式下被载入。
你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量，请在你的 package.json 脚本中加入：
"dev-build": "vue-cli-service build --mode development",
在项目根路径创建.env.test文件，内容为
NODE_ENV='production' //表明这是生产环境(需要打包)
VUE_APP_CURRENTMODE='test' // 表明生产环境模式信息
VUE_APP_BASEURL='http://***.****.com:8000' // 测试服务器地址
修改项目中的api接口文件
在我的项目中,一般会创建一个api.js 来管理所有的接口url
因为我们在本地开发环境中是通过代理来连接服务器的,所以将url写成这
在文件开头通过环境变量改变baseUrl
let baseUrl = '';
if (process.env.NODE_ENV == 'development') {
baseUrl = ""
} else if (process.env.NODE_ENV == 'production') {
baseUrl = process.env.VUE_APP_BASEURL
} else {
baseUrl = ""
}
网友评论