process.env 是 Node.js 中的一个环境对象。其中保存着系统的环境的变量信息。可使用 Node.js 命令行工具直接进行查看。
以ant-design-vue-pro官网项目为例:
第一步:
.env.development 开发环境下的配置文件
NODE_ENV=development
VUE_APP_PREVIEW=true
VUE_APP_API_BASE_URL=/devApi
.env.production 生产环境下的配置文件
NODE_ENV=production
VUE_APP_PREVIEW=true
VUE_APP_API_BASE_URL=/proApi
在main.js中打印process.env.VUE_APP_API_BASE_URL可查看
第二步:
package.json文件配置( 根据文件名进行加载):
"scripts": {
"dev": "vue-cli-service serve --mode development",
"prod": "vue-cli-service serve --mode production",
"build:dev": "vue-cli-service build --mode development",
"build:prod": "vue-cli-service build --mode production",
}
如果直接运行vue-cli service serve(不使用 --mode 参数手动指定模式),默认模式为 development。
如果运行npm run dev就会先加载.env文件再加载.env.development;在main.js中打印出process.env.VUE_APP_API_BASE_URL如下:
npm run build ,其实运行了 vue-cli service build ,默认模式为 production 。
如果运行npm run build:prod就会先加载.env文件再加载.env.production;在main.js中打印出process.env.VUE_APP_API_BASE_URL如下: