vue-cli 配置多环境打包

重点：亲测有效亲测有效亲测有效

做开发遇到问题最重要是在网上找方法能有效，我觉得这个是重点，要不然真的是浪费时间

首先我们先看看 vue-cli环境变量和模式，通过官网我们可以发现 vue-cli 提供了三个模式（test、development、production）而每种NODE_ENV下面可以配置多个环境变量

我们可以通过.env文件增加后缀来设置某个模式下特有的环境变量

了解基本情况之后我们就举例子实现多环境:

1、首先创建三个文件

在项目目录下创建不同的.env文件(目前我们讨论开发环境 dev,测试环境test,发布环境 prod) 所以我们创建如下三个文件(.env.prod、.env.test、.env.development)

2、配置三个文件

①开发环境: 如下图

这里开发环境的 NODE_ENV 需要配置为 development

VUE_APP_API_URL 设置对应的请求地址

②测试环境如下图

这里开发环境的 NODE_ENV 需要配置为 production，不然不压缩混淆

VUE_APP_API_URL 设置对应的请求地址

javascript 复制代码

NODE_ENV = 'production'
 
# just a flag
ENV = 'pre'
 
# base api
VUE_APP_BASE_API = '/admin-pre'

③ 发布环境如下图

这里发布环境的 NODE_ENV需要配置为production

VUE_APP_API_URL 设置对应的请求地址

javascript 复制代码

NODE_ENV = 'production'
 
# just a flag
ENV = 'pre'
 
# base api
VUE_APP_BASE_API = '/admin-prod'

④ 如果需要其他环境按照以上描述创建 .env.[model]文件

如果是项目打包那么 NODE_ENV 设置为 production ,本地运行(不需要打包) NODE_ENV 设置为 development

VUE_APP_API_URL 设置对应的请求地址

特别提示：上述的 VUE_APP_API_URL 不一定非要使用这个变量只要是 VUE_APP_ 开头的都可以因为只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。都可以使用 process.env.VUE_APP_** 获取相应的值

3、完成以上所需环境配置之后改写 package.json

javascript 复制代码

 "scripts": {
    "dev": "vue-cli-service serve --open",
    "build:all": "npm run build:pro && npm run build:pre && npm run build:test",
    "build:prod": "vue-cli-service build --mode prod",
    "build:test": "vue-cli-service build --mode test",
    "build:pre": "vue-cli-service build --mode pre",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e"
  },

这里需要注意的是 --model 后面的参数需要是 .env.[model] 文件对应的 [model]

例如 .env.test 文件那么这里就是 --mode test

.env.prod 文件那么这里就是 --mode prod

特别提示：本地开发环境如果本地开发环境配置的 .env.[model] 文件名中的 model 为 development 那么直接使用上述的 vue-cli-service serve --port 8090 --open命令，但是如果 .env.[model]的文件名中的model 不是 development 那么就需要在命令后面添加 --model 这个model的值对应的就是 .env.[model]文件的后缀[model]的值。

4、完成以上配置之后只需要在请求配置文件中读取 process.env.VUE_APP_API_URL 的值(这个变量名根据自己配置填写)

我的项目使用serve.config.js 单独配置请求地址 ,然后导出在axios配置文件中使用, 大家可以根据自己项目将 process.env.VUE_APP_API_URL这个地址变量放到自己需要配置的地方就可以了。

最后：这还能解决ie兼容问题，我的项目中就是在配置中改动导致ie打不开报兼容问题1003，就是在配置中NODE_ENV 配置了自定义的名字，然后在vue.config.js中没有去配置，导致打包以后不能在ie11上正常运行，然后按照上面的配置就没问题了。

vue-cli 配置多环境打包

1、首先创建三个文件

2、配置三个文件

3、完成以上所需环境配置之后改写 package.json

4、 完成以上配置 之后 只需要在 请求配置文件中 读取 process.env.VUE_APP_API_URL 的值(这个变量名 根据自己配置填写)

4、完成以上配置之后只需要在请求配置文件中读取 process.env.VUE_APP_API_URL 的值(这个变量名根据自己配置填写)