为什么配置多环境变量呢?
在我们开发的过程中,会有多个不同的访问环境比如:开发环境 、 生产环境 等等。在每一种环境下所需要访问的域名都是不一样的,所以可以通过配置多环境变量来解决这一问题。
一、在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);