在用vue框架时,经常用到多种环境

一种是开发环境,就是本地开发时的环境
一种是测试环境,就是测试人员使用的服务环境
一种是生产环境,就是要发布到线上的环境。

注意:日常开发是用开发环境的,如果发布到线上时,需要切换环境为线上。如果人为去切换也是可以的,但是会容易忘记,可以通过配置不同的运行命令来自动切换环境。
步骤开始

步骤一:手动创建 文件 .env.development 和.env.production和.env.test几个文件
步骤二
.env.development如下:(开发环境)

NODE_ENV = 'development'
VUE_APP_MODE = 'development'
VUE_APP_API_URL = 'http://47.94.4.201/'

 .env.production如下:(正式线上环境,或者叫生产环境)

NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URL = 'https://www.zzgoodqc.cn/'

.env.test(测试环境)

​​​​​​​NODE_ENV = 'test'
VUE_APP_MODE = 'test'
VUE_APP_API_URL = 'http://49.94.4.21/'
outputDir = test

步骤三:在axios封装中使用环境配置项(api.js中)

//获取当前环境配置项中的地址,会自动追加到接口上
axios.defaults.baseURL = process.env.VUE_APP_API_URL

//获取配置项信息,可以做你的逻辑处理
if(process.env.VUE_APP_MODE==='development'){
    //开发环境下的执行操作
	console.log('开发');
}else if(process.env.VUE_APP_MODE==='test'){
    //测试环境下的执行操作
	console.log('测试');
}else{
    //生产环境下的执行操作
	console.log('正式');
}

步骤四:接口调用

//代码中无需再加服务器IP地址,会自动追加过去
export function apiGet(url, params){ 
	return new Promise((resolve, reject) =>{ 
		axios.get(url, { 
			params: params,
			herader:{"token":sessionStorage.getItem('token')}
		}).then(res => {
			resolve(res.data);
		}).catch(err =>{
			reject(err.data) 
		}) 
   });
}

 步骤五:打包命令配置:

//找到package.json  
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "vue-cli-service build --mode test",
    "publish": "vue-cli-service build && vue-cli-service build --mode test"
  },

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐