vue3配置测试环境、开发环境、生产环境

第一步：在src同级新建 .env.production 、.env.test 、.env.development文件
第二步：在文件中配置开发环境、生产环境、测试环境

		// 开发环境 .env.developmentNODE_ENV = 'development'VUE_APP_MODE = 'development' outputDir = dist_dev // 打出包的名称VUE_APP_BASE_URL = http://xxxxxxxxx:xxxx/// 生产环境 .env.productionNODE_ENV = 'production'VUE_APP_MODE = 'production'outputDir = dist_proVUE_APP_BASE_URL = http://xxxxxxxxx:xxxx/// 测试环境 .env.testNODE_ENV = 'alpha' // 此处不能为test，否则会报错VUE_APP_MODE = 'alpha'// 此处不能为test，否则会报错outputDir = dist_testVUE_APP_BASE_URL = http://xxxxxxxxxxxx:xxxx/

第三步：在axios.js中配置基础

import axios from "axios";
import { ElMessage, ElMessageBox } from 'element-plus'
import router from '../router/index';
//axios请求配置
const config = {// 访问后端baseURL: process.env.VUE_APP_BASE_URL,//超时时间timeout: 1000000
}
//class:定义一个类
class Server {//构造函数里面初始化constructor(config) {this.instance = axios.create(config)//定义拦截器:请求发送之前和请求返回之后处理this.interceptors()}//拦截器interceptors() {//axios发送请求之前的处理this.instance.interceptors.request.use((config) => {//token携带let token = localStorage.getItem('token');if (token != null) {config.headers.token = token}let tokenUser = localStorage.getItem('tokenUser');if (tokenUser != null) {config.headers.tokenUser = tokenUser}return config;}, (error) => {error.data = {}error.data.msg = '服务器异常，请联系管理员!'return error;})//axios请求返回之后的处理//请求返回之后的处理this.instance.interceptors.response.use((res) => {if (res.data.code == 0 && res.data.msg?.includes('请先注册')) {return res.data;}if (res.data.code == 0) {if (res.data.msg != 'wxnull') {ElMessage({ type: 'error', message: res.data.msg })}return res.data} else {return res.data}}, (error) => {error.data = {};if (error && error.response) {switch (error.response.status) {case 400:error.data.msg = '错误请求';return ElMessage({ type: 'error', message: error.data.msg })case 401:error.data.msg = '未授权，请重新登录';return ElMessage({ type: 'error', message: error.data.msg })case 403:error.data.msg = '拒绝访问';return ElMessageBox.confirm('很抱歉，登录已过期，请重新登录', '登录已过期', {confirmButtonText: '重新登录',type: 'error',showCancelButton: false}).then(() => {router.push('/login');localStorage.removeItem('token');})case 404:error.data.msg = '请求错误,未找到该资源';return ElMessage({ type: 'error', message: error.data.msg })case 405:error.data.msg = '请求方法未允许';return ElMessage({ type: 'error', message: error.data.msg })case 408:error.data.msg = '请求超时';return ElMessage({ type: 'error', message: error.data.msg })case 500:error.data.msg = '服务器端出错';return ElMessage({ type: 'error', message: error.data.msg })case 501:error.data.msg = '网络未实现';return ElMessage({ type: 'error', message: error.data.msg })case 502:error.data.msg = '网络错误';return ElMessage({ type: 'error', message: error.data.msg })case 503:error.data.msg = '服务不可用';return ElMessage({ type: 'error', message: error.data.msg })case 504:error.data.msg = '网络超时';return ElMessage({ type: 'error', message: error.data.msg })case 505:error.data.msg = 'http版本不支持该请求';return ElMessage({ type: 'error', message: error.data.msg })default:error.data.msg = `连接错误${error.response.status}`;return ElMessage({ type: 'error', message: error.data.msg })}} else {error.data.msg = "连接到服务器失败";// router.push('/login');return ElMessage({ type: 'error', message: error.data.msg })}return Promise.reject(error)})}/* GET 方法 */get(url, params) {return this.instance.get(url, { params })}/* POST 方法 */post(url, data) {return this.instance.post(url, data)}/* PUT 方法 */put(url, data) {return this.instance.put(url, data)}/* DELETE 方法 */delete(url) {return this.instance.delete(url)}//图片上传upload(url, params) {return this.instance.post(url, params, {headers: {'Content-Type': 'multipart/form-data'}})}upimg(url, params) {return this.instance.get(url, params, {headers: {'Content-Type': 'application/octet-stream'}})}
}
export default new Server(config)

第四步：在package.json中配置基础

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","serve:development": "vue-cli-service serve --mode development","build:development": "vue-cli-service build --mode development","serve:production": "vue-cli-service serve --mode production","build:production": "vue-cli-service build --mode production"}
// 使用yarn/npm run serve:development/production 运行
// 使用yarn/npm run build:development/production 打包

第五步：在babel.config.js中配置基础

 compact: false, // 加上此项配置env: {development: {plugins: ['dynamic-import-node']}}