环境部署

项目模式

Vue CLI 项目有三个模式:

development: 模式用于 vue-cli-service serve
production:  模式用于 vue-cli-service build 和 vue-cli-service test:e2e
test:        模式用于 vue-cli-service test:unit


可以通过 --mode 选项参数来覆写默认模式;例如,想要在构建命令中使用开发环境变量,请在 package.json 脚本中加入:

"dev-build": "vue-cli-service build --mode development"


获取项目环境(模式)

process.env.NODE_ENV : 会是 “development”、“production” 或 “test”中的一个,具体值取决于应用运行的模式

process.env.BASE_URL : 和vue.config.js 中的 publicPath 选项相同,是应用会部署到的基础路径


环境变量配置

启动或打包时可通过 --mode 参数来覆盖默认的环境模式,如下:

"scripts": {
  "serve:dev": "vue-cli-service serve --mode dev",
  "serve:dev.prod": "vue-cli-service serve --mode dev.prod",
  "build:dev": "vue-cli-service build --mode dev",
  "build:prod": "vue-cli-service build --mode prod",
  "build:other": "vue-cli-service build --mode other",
  "lint": "vue-cli-service lint"
},

运行 vue-cli-service 命令时,所有的环境变量都从对应的环境文件中载入;如果环境文件内部不包含 NODE_ENV 变量,则 NODE_ENV 的值将取决于 vue-cli-service 所支持的默认模式;环境文件以 .env 开头,如下:

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入,但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入,但会被 git 忽略

例如下图所示:


注:只有环境文件中的 NODE_ENVBASE_URL 和以 VUE_APP_ 开头的变量会通过 webpack.DefinePlugin 静态地嵌入到客户端侧代码中,这是为了避免意外公开机器上可能具有相同名称的私钥。


详见:https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F

举报

© 著作权归作者所有


1