vue-cli3环境变量与分环境打包

2019年8月31日 237次阅读 来源: yunsiyu

第一步 : 相识环境变量观点

我们能够根目次中的以下文件来指定环境变量:

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

环境变量文件只包括环境变量的“键=值”对：

FOO=bar
VUE_APP_SECRET=secret // 只要VUE_APP_开首的环境变量能够在项目代码中直接运用

除了 自定义的VUE_APP_* 变量以外，在你的运用代码中一直可用的另有两个特别的变量：

  • NODE_ENV – 会是 “development”、”production” 或 “test”
    中的一个。详细的值取决于运用运转的形式。
  • BASE_URL – 会和 vue.config.js 中的 publicPath 选项符合，即你的运用会布置到的基本途径。

为一个特定形式预备的环境文件的 (比方 .env.production) 将会比平常的环境文件 (比方 .env) 具有更高的优先级。

形式观点:
形式是 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",

环境变量的运用 :
只要以 VUE_APP_ 开首的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中(即在项目代码中运用)。你能够在运用的代码中如许接见它们：

console.log(process.env.VUE_APP_SECRET)

明白指令 , 形式 , 环境变量之间的关联
我们在项目中的package.json常常能看见以下如许的指令

《vue-cli3环境变量与分环境打包》

在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的敕令。你能够在 npm scripts 中以 vue-cli-service、或许从终端中以 ./node_modules/.bin/vue-cli-service 接见这个敕令。
vue-cli-service serve

用法：vue-cli-service serve [options] [entry]
选项：
  --open    在效劳器启动时翻开浏览器
  --copy    在效劳器启动时将 URL 复制到剪切版
  --mode    指定环境形式 (默许值：development)
  --host    指定 host (默许值：0.0.0.0)
  --port    指定 port (默许值：8080)
  --https   运用 https (默许值：false)

vue-cli-service build

用法：vue-cli-service build [options] [entry|pattern]

选项：
  --mode        指定环境形式 (默许值：production)
  --dest        指定输出目次 (默许值：dist)
  --modern      面向当代浏览器带自动回退地构建运用
  --target      app | lib | wc | wc-async (默许值：app)
  --name        库或 Web Components 形式下的名字 (默许值：package.json 中的 "name" 字段或进口文件名)
  --no-clean    在构建项目之前不消灭目的目次
  --report      天生 report.html 以协助剖析包内容
  --report-json 天生 report.json 以协助剖析包内容
  --watch       监听文件变化

以上是两个经常使用的cli指令 , 他们默许对应的分别是development和production形式 , 假如还想相识其他指令 , 能够接见: https://cli.vuejs.org/zh/guid… CLI 效劳

那末接下来 , 我们就最先建立一个用于打包测试环境的形式;

修正package.json
增加一行敕令

"test": "vue-cli-service build --mode test"

增加.env.test文件
在项目根途径建立.env.test文件，内容为

NODE_ENV='production'  //表明这是临盆环境(须要打包)
VUE_APP_CURRENTMODE='test' // 表明临盆环境形式信息
VUE_APP_BASEURL='http://***.****.com:8000' // 测试效劳器地点

修正项目中的api接口文件
在我的项目中,平常会建立一个api.js 来管理所有的接口url
由于我们在当地开辟环境中是经由过程代办来衔接效劳器的,所以将url写成这

`${baseUrl}/apis/v1/login`,

在文件开首经由过程环境变量转变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 = "" 
}

当须要为测试环境举行打包的时刻 , 我们只须要运转下面指令举行打包

npm run test
    原文作者：yunsiyu
    原文地址: https://segmentfault.com/a/1190000018161776
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞