Vue 多环境变量的配置

为什么配置多环境变量呢？

        在我们开发的过程中，会有多个不同的访问环境比如：开发环境 、 生产环境 等等。在每一种环境下所需要访问的域名都是不一样的，所以可以通过配置多环境变量来解决这一问题。

---

一、在Vue中首先找到 package.json 文件

 二、找到文件中的  scripts  添加新的配置

"scripts": {

    "serve": "vue-cli-service serve --open",   //npm run serve 启动项目

    "build": "vue-cli-service build",      //npm run build  打包项目

    "stage": "vue-cli-service build --mode staging",   //npm run stage 打包测试

  }

三、在项目根目录中新建  .env.* 

在目录中新建三个  .env.development    .env.production     .env.staging  例如：

在   .env.*** 中写入你所需要的开发环境配置  例如在  .env.development  本地开发环境中配置：

                 以  VUE_APP_  开头的变量，在代码中可以通过  process.env.VUE_APP_   访问。

                比如： VUE_APP_ENV = 'development'   通过  process.env.VUE_APP_ENV  访问。

                除了 VUE_APP_*  变量，在代码中还有两个特殊的变量 NODE_ENV  和  BAES_URL

四、在src目录中新建一个  config  文件夹, 文件夹中新建js文件，看你需要什么环境，每一种环境都不相同(修改起来方便，不需要重启项目，符合开发习惯)

配置对应的环境变量   例如：env.development.js  

// 本地环境配置

module.exports = {

  title: 'vue-h5-template',

  baseUrl: 'http://localhost:9018', // 项目地址

  baseApi: 'https://test.xxx.com/api', // 本地api请求地址,注意：如果你使用了代理，请设置成'/'

  APPID: 'xxx',

  APPSECRET: 'xxx',

  $cdn: 'https://gimg2.baidu.com'

}

config/index.js     通过该文件来动态传递不同的环境请求地址

// 根据环境引入不同配置 process.env.VUE_APP_ENV

const environment = process.env.VUE_APP_ENV || 'production'

const config = require('./env.' + environment)

module.exports = config

根据不同的环境，变量也就会变得不同

// 根据环境不同引入不同api地址

import { baseApi } from '@/config'

console.log(baseApi);