什么是多环境变量
- 项目在运行时会根据启动的指令来运行不同的环境,在不同的环境中,我们配置对应所需的变量来满足我们的开发需求,称为多环境变量。
- 环境一般分为
开发环境
测试环境
生产环境
配置流程
- 在项目根目录下的
package.json
中配置serve test build
,通过 --mode xxx
来执行不同环境
"scripts": {
"serve": "vue-cli-service serve --open",
"test": "vue-cli-service build --mode testing",
"build": "vue-cli-service build",
}
–open
是运行的时候自动开出页面- 通过
npm run serve
启动本地 , 执行 development
- 通过
npm run test
打包测试 , 执行 testing
- 通过
npm run build
打包正式 , 执行 production
- 在项目根目录下创建
.env.xxx
.env.development
本地开发环境配置
NODE_ENV='development'
NODE_ENV='production'
NODE_ENV='production'
- 在
src
下面创建一个config
文件夹下面配置三个相对应的的js
- 重新配置三个是因为修改起来方便,不需要重启项目,符合开发习惯。
const config = require('./env.' + process.env.NODE_ENV)
module.exports = config
- 配置对应环境的变量,拿本地环境文件
env.development.js
举例,用户可以根据需求修改
module.exports = {
title: 'vue-h5-template',
baseUrl: 'http://localhost:9018',
baseApi: 'https://test.xxx.com/api',
APPID: 'xxx',
APPSECRET: 'xxx'
}
- 在我们根目录下的
src
文件里的main.js
文件中引入
import {baseUrl} from "./config/index";
console.log(baseUrl);