菜鸟看前端（vue项目多环境配置）

1. 配置多环境启动

package.json 里的 scripts 配置 serve stage build，通过 --mode xxx 来执行不同环境

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

配置介绍:
以 VUE_APP_ 开头的变量，在代码中可以通过 process.env.VUE_APP_ 访问。
比如,VUE_APP_ENV = ‘development’ 通过process.env.VUE_APP_ENV 访问。
除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量NODE_ENV 和BASE_URL

2.在根目录下新建.env.

1. .env.development是本地开发配置

NODE_ENV='development'
# must start with VUE_APP_
VUE_APP_ENV = 'development'

2. .env.production是正式环境配置

NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'production'

3. .env.staging 测试环境配置

NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'staging'

只定义基础的 VUE_APP_ENV development(本地开发配置) staging(测试环境配置)production(正式环境配置)
变量我们统一在 src/config/env.*.js 里进行管理

3.新建文件夹管理环境配置

1. 在src下新建config文件夹，文件夹内新建index.js,env.development.js,env.production.js,env.staging.js文件
2. 在congig/index.js,文件内根据当前启动环境，引入不同的环境配置

const config = require('./env.' + process.env.VUE_APP_ENV)
module.exports = config

3. 配置对应环境的变量，拿本地环境文件 env.development.js 举例，用户可以根据需求修改

module.exports = {
  title: 'vue-h5-template', // 标题
  baseUrl: 'http://localhost:9018', // 项目地址
  baseApi: 'https://test.xxx.com/api', // 本地api请求地址
}

4. 根据环境不同，变量就会不同,用来封装axios

// 根据环境不同引入不同baseApi地址
import { baseApi } from '@/config'
console.log(baseApi)