Vuejs开发、生产等环境配置

刚开始开发项目的时候,开发环境和生产部署的环境Vuejs组件中请求的服务端API域名地址不同,每次都要手动替换代码中的域名比较麻烦。对于这个问题其实可以通过配置开发、生产等不同环境的不同域名来解决,配置好不同环境以后,就不用需要上线或测试项目的时候,修改代码中的API请求地址。

查看官方文档环境变量和模式

关于多环境配置,Vue-cli3已经提供了完整的方案,你只需要根据vue-cli3的使用标准,进行相关的配置即可。

1. 根目录创建不同环境对应的文件

你可以在项目根目录创建不同环境对应的配置文件,比如开发环境文件.env.development、生产环境文件.env.production。

环境 含义 根目录创建文件
development 开发环境 .env.development
production 生产环境 .env.production
test 测试环境 .env.test

webgl

.env.development文件内容,域名地址可以根据自己需要设置。

//环境对应IP地址,也可以是其他的形式,比如VUE_APP_BASE_API=http://localhost:3000/api
VUE_APP_BASE_API=http://localhost:3000/
//当前环境命名,代码中可以访问
VUE_APP_ENV=development

生产环境.env.production文件内容

VUE_APP_BASE_API=http://域名地址,代码中可以访问
VUE_APP_ENV=production//生产环境名称,代码中可以访问

2. 配置package.json

package.json中命令行默认设置

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

通过--mode设置命令行命令对应的环境文件,也就是你创建的.env.development、.env.production等文件。

  "scripts": {
    "serve": "vue-cli-service serve --mode development",//开发环境
    "build": "vue-cli-service build --mode production",//生产环境
  },

你可以在根目录随意创建.env.环境名称文件,只要package.json文件中命令行中通过模式命令--mode 环境名称设置即可。

3. 使用

在Vuejs代码中,通过process.env.VUE_APP_ENV判断当前环境

//判断当前环境是否是生产环境
if (process.env.VUE_APP_ENV === 'production') { 
...
}

在Vuejs代码中,通过process.env.VUE_APP_BASE_API获得当前环境对应的数据请求的IP地址

import axios from 'axios';
// axios.defaults.baseURL = 'http://localhost:3000/api';
axios.defaults.baseURL = process.env.VUE_APP_BASE_API+'api';