vue-cli3 多环境打包问题

前言

一般在我们项目开发中，一般会有以下3个环境

• 开发环境也叫测试环境(test)
• RC环境也叫预发布环境(rc)
• 线上环境(production)

场景

那么有一种情况是我们需要在不同环境下区分不同的api接口例如

• 测试环境(test) api=test.ydhtml.com
• 预发布环境(rc) api=rc.ydhtml.com
• 线上环境(production) api=ydhtml.com

指令

在一个 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模式

创建环境

接下来我们依次在项目的根目录中创建三个文件分别对应三个环境，文件名如下

.env.test
.env.rc
.env.production

.env.test文件内容如下

NODE_ENV=production // 表明这是生产环境(需要打包，不加的话，打包只会生成一个app.js文件)
VUE_APP_NODE_ENV=test

.env.rc文件内容如下

NODE_ENV=production // 表明这是生产环境(需要打包，不加的话，打包只会生成一个app.js文件)
VUE_APP_NODE_ENV=rc

.env.production文件内容如下

NODE_ENV=production // 表明这是生产环境(需要打包，不加的话，打包只会生成一个app.js文件)
VUE_APP_NODE_ENV=production

只有VUE_APP_开头的环境变量可以在项目代码中直接使用

配置好对应得环境之后，我们在 package.json 下得 scripts增加打包命令，如下

"build": "vue-cli-service build --mode production",
"build:rc": "vue-cli-service build --mode rc",
"build:test": "vue-cli-service build --mode testing",

最后

最后我们在页面里面使用，代码如下

// http.js
import axios from 'axios'

const api = {
    production: 'http://ydhtml.com',
    test: 'http://test-ydhtml.com',
    rc: 'http://rc-ydhtml.com'
}

axios.defaults.baseURL = api[process.env.VUE_APP_NODE_ENV]

分享

最后分享黄轶老师的Vue源码解析