乐趣区

关于vue.js:vuecliservice-build-不同环境配置

jiezi

背景

在我的项目部署时，咱们须要在测试环境和生产环境应用不同的变量。
vue-cli 提供了 vue-cli-service build 打包命令，然而 vue-cli-service build 默认的环境变量值则为 production。那咱们通过npm run build 打包构建，想要实现不同环境应用不同变量，临时不能实现。

介绍

vue-cli 生成我的项目时，在 package.json 中会设置：

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
}

vue-cli-service serve 命令会启动一个开发服务器，默认指定的环境模式为 development。
vue-cli-service build 会在 dist/ 目录产生一个可用于生产环境的包，带有 JS/CSS/HTML 的压缩，和为更好的缓存而做的主动的 vendor chunk splitting。

环境变量和模式

在我的项目的根目录下咱们能够创立不同模式的文件：

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

一般来说，咱们会存在 本地环境、测试环境、线上环境，那咱们就须要创立三个模式文件。

  • .env.development开发环境模式
// 环境变量
NODE_ENV=development
// 以 VUE_APP_ 结尾的变量会被 webpack.DefinePlugin 动态嵌入到客户端侧的包中
VUE_APP_ENV = 'development'
  • .env.test测试环境模式
// 环境变量（这里的环境变量是跟打包无关的，production 则会进行压缩代码等，真正跟每个环境无关的变量是上面以 VUE_APP 结尾的变量）NODE_ENV=production
// 以 VUE_APP_ 结尾的变量会被 webpack.DefinePlugin 动态嵌入到客户端侧的包中
VUE_APP_ENV = 'test'
  • .env.production线上环境模式
// 环境变量
NODE_ENV=production
// 以 VUE_APP_ 结尾的变量会被 webpack.DefinePlugin 动态嵌入到客户端侧的包中
VUE_APP_ENV = 'production'

配置不同模式

部署时，构建打包执行npm run build，则会执行vue-cli-service build，默认模式为production，对应.env.production 文件，取此文件中的环境变量。

想要配置测试环境，须要在 scripts 下减少脚本：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-test": "vue-cli-service build --mode test"
}

测试环境打包构建时，执行 npm run build-test 即可。

index.html 应用环境变量

在 index.html 中可通过 <%= process.env.VUE_APP_xxx %> 的形式获取不同模式下配置的环境变量。

退出移动版