VUE 环境变量 process process.env

vue-cli 构建的项目，可以创建 .env.development .env.production等文件， 在根目录下面， 里面可以定义一下变量，称为环境变量，因为他们属于 development production 环境。
简单看一下.env.development文件的内容

VUE_CLI_BABEL_TRANSPILE_MODULES = true
NODE_ENV: 'development'
VUE_APP_PORT = '8091'
VUE_APP_TITLE = '这是一个title'
VUE_APP_BASE_API = 'myApiUrl'

prot = ‘8090’
AUTHOR = ‘zcy’

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

console.log(process)
以下是打印出的结果

BASE_URL: "/"
NODE_ENV: "development"
VUE_APP_BASE_API: "myApiUrl"
VUE_APP_PORT: "8091"
VUE_APP_TITLE: "这是一个title"

 
 

 
 
1
2
3
4
5

配置文件的内容是以键值对的形式出现，但并不是随意定义键名有一定的柜子
1、VUE_APP_ XXXXX 开头的变量
2、NODE_ENV - 会是 “development”、“production” 或 “test” 中的一个。具体的值取决于应用运行的模式。
3、BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。
可以一下我上面的示例，我定义了额外的变量，可以看的出“prot” "AUTHOR"都没有，所以大家要按规则来
还有一点我还不是很清楚，就是VUE_CLI_BABEL_TRANSPILE_MODULES = true 当没有它的时候npm run dev 报错无法启动，知道的朋友可以告诉我一下，谢谢了。

当我们使用npm run dev的时候环境变量使用的是.env.development 中的配置，使用npm run build 的时候使用的是.env.production中的配置

我们实际开发中可能所用的环境比较多，都段的接口也是响应环境的都可以配置

npm的命令在package.json中配置

"scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode pre",
    "build:dev": "vue-cli-service build --mode development",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src",
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "test:ci": "npm run lint && npm run test:unit",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
  },

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11