20、多环境变量配置

多环境变量配置

在项目上线之前我们要经过开发和试错测试
所以写项目的时候
会有三个基本接口也就是域名：

团队开发的时候就会有自己的域名：开发环境
当我们写完项目得的时候域名就会发生改变：测试环境
测试通过后就会准备上线项目就会有上线的域名：生产环境的、

在项目的根目录下的

package.js

✅ 配置多环境变量
package.json 里的 scripts 配置 serve test build，通过 --mode xxx 来执行不同环境

通过 npm run serve 启动本地 , 执行 development
通过 npm run test 打包测试 , 执行 testing
通过 npm run build 打包正式 , 执行 production

定义的执行语句分别对照上面的执行命令【可自定义的设置】

"scripts": {
    
    
  "serve": "vue-cli-service serve --open",            //本地开发环境 启动
  "testing": "vue-cli-service build --mode testing",  //测试环境配置 启动
  "build": "vue-cli-service build",                   //正式环境配置 启动
}

配置介绍

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

比如,VUE_APP_ENV = ‘development’ 通过process.env.VUE_APP_ENV 访问。

除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量NODE_ENV 和BASE_URL

在这里插入图片描述

在不同的三个文件中定义不同环境定义三个不同的环境变量
规定的·NODE_ENV = 'xxx''

.env.development （三个自己定义的文件里面）
本地开发环境配置
//
NODE_ENV=‘development’

.env.testing
测试环境配置
//
NODE_ENV=‘testing’

.env.production
正式环境配置（也就是生产环境）
//
NODE_ENV=‘production’

这里我们并没有定义很多变量，只定义了基础的 VUE_APP_ENV development、 testing、 production…

变量我们统一在 src/config/env.*.js 里进行管理。
（创建四个env.xxx.js配置文件在 config中）

在这里插入图片描述

这里有个问题，既然这里有了根据不同环境设置变量的文件，为什么还要去 config 下新建三个对应的文件呢？

修改起来方便，不需要重启项目，符合开发习惯。

分别导出我们项目需要的不同的基本路径也就是接口地址

module.exports = {
    
    
baseUrl='xxxx路径xxxx'
}

在这里插入图片描述

最后这个：
config/index.js

// 根据环境引入不同配置，使用 process.env.NODE_ENV

//引入 刚才配置的三个不同的环境变量
//导入  也就是动态的 环境变量
const config = require('./env.' + process.env.NODE_ENV)
//导出
module.exports = config


///  这里的 process.env.NODE_ENV 的意思是获取到我们定义三个不同的 变量的值
（获取 环境变量的固定语法）

慢慢品~ 哈哈哈我劝你善良

main.js中导入
// 根据的环境不同引入不同baseUrl地址

//全局的导入 
import {
    
     baseUrl } from './config/index'
  //就可以打印展示我们现在所 运行的环境
console.log(baseUrl)

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

？？？？？? ? ???
// 本地环境配置

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

根据环境不同，变量就会不同了

20、多环境变量配置

多环境变量配置

猜你喜欢