vue环境配置

在用 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 文件中配置 "test": "vue-cli-service build --mode test",

//找到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"
  },

注意：千万不要忘记这一步

        在 vue.config.js 文件里面配置路径 publicPath: './',

module.exports = defineConfig({
  publicPath: './',
  transpileDependencies: true
})