vue 打包

原创已于 2022-10-30 16:56:05 修改

· 532 阅读

0 ·

版权

文章标签：

#前端 #javascript #java

于 2022-07-29 10:50:42 首次发布

本文详细介绍了如何在Vue项目中通过.env文件管理不同环境的API地址，并展示了如何在axios封装中根据环境切换行为。通过`.env`文件和axios的动态配置，简化了部署流程并保证了代码的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

步骤一：手动创建文件 .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

1

"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"

}，