第一步：在src同級(jí)新建 .env.production 、.env.test 、.env.development文件
第二步：在文件中配置開發(fā)環(huán)境、生產(chǎn)環(huán)境、測(cè)試環(huán)境

		// 開發(fā)環(huán)境 .env.developmentNODE_ENV = 'development'VUE_APP_MODE = 'development' outputDir = dist_dev // 打出包的名稱VUE_APP_BASE_URL = http://xxxxxxxxx:xxxx/// 生產(chǎn)環(huán)境 .env.productionNODE_ENV = 'production'VUE_APP_MODE = 'production'outputDir = dist_proVUE_APP_BASE_URL = http://xxxxxxxxx:xxxx/// 測(cè)試環(huán)境 .env.testNODE_ENV = 'alpha' // 此處不能為test，否則會(huì)報(bào)錯(cuò)VUE_APP_MODE = 'alpha'// 此處不能為test，否則會(huì)報(bào)錯(cuò)outputDir = dist_testVUE_APP_BASE_URL = http://xxxxxxxxxxxx:xxxx/

第三步：在axios.js中配置基礎(chǔ)

import axios from "axios";
import { ElMessage, ElMessageBox } from 'element-plus'
import router from '../router/index';
//axios請(qǐng)求配置
const config = {// 訪問后端baseURL: process.env.VUE_APP_BASE_URL,//超時(shí)時(shí)間timeout: 1000000
}
//class:定義一個(gè)類
class Server {//構(gòu)造函數(shù)里面初始化constructor(config) {this.instance = axios.create(config)//定義攔截器:請(qǐng)求發(fā)送之前和請(qǐng)求返回之后處理this.interceptors()}//攔截器interceptors() {//axios發(fā)送請(qǐng)求之前的處理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 = '服務(wù)器異常，請(qǐng)聯(lián)系管理員!'return error;})//axios請(qǐng)求返回之后的處理//請(qǐng)求返回之后的處理this.instance.interceptors.response.use((res) => {if (res.data.code == 0 && res.data.msg?.includes('請(qǐng)先注冊(cè)')) {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 = '錯(cuò)誤請(qǐng)求';return ElMessage({ type: 'error', message: error.data.msg })case 401:error.data.msg = '未授權(quán)，請(qǐng)重新登錄';return ElMessage({ type: 'error', message: error.data.msg })case 403:error.data.msg = '拒絕訪問';return ElMessageBox.confirm('很抱歉，登錄已過期，請(qǐng)重新登錄', '登錄已過期', {confirmButtonText: '重新登錄',type: 'error',showCancelButton: false}).then(() => {router.push('/login');localStorage.removeItem('token');})case 404:error.data.msg = '請(qǐng)求錯(cuò)誤,未找到該資源';return ElMessage({ type: 'error', message: error.data.msg })case 405:error.data.msg = '請(qǐng)求方法未允許';return ElMessage({ type: 'error', message: error.data.msg })case 408:error.data.msg = '請(qǐng)求超時(shí)';return ElMessage({ type: 'error', message: error.data.msg })case 500:error.data.msg = '服務(wù)器端出錯(cuò)';return ElMessage({ type: 'error', message: error.data.msg })case 501:error.data.msg = '網(wǎng)絡(luò)未實(shí)現(xiàn)';return ElMessage({ type: 'error', message: error.data.msg })case 502:error.data.msg = '網(wǎng)絡(luò)錯(cuò)誤';return ElMessage({ type: 'error', message: error.data.msg })case 503:error.data.msg = '服務(wù)不可用';return ElMessage({ type: 'error', message: error.data.msg })case 504:error.data.msg = '網(wǎng)絡(luò)超時(shí)';return ElMessage({ type: 'error', message: error.data.msg })case 505:error.data.msg = 'http版本不支持該請(qǐng)求';return ElMessage({ type: 'error', message: error.data.msg })default:error.data.msg = `連接錯(cuò)誤${error.response.status}`;return ElMessage({ type: 'error', message: error.data.msg })}} else {error.data.msg = "連接到服務(wù)器失敗";// 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中配置基礎(chǔ)

"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 運(yùn)行
// 使用yarn/npm run build:development/production 打包

第五步：在babel.config.js中配置基礎(chǔ)

 compact: false, // 加上此項(xiàng)配置env: {development: {plugins: ['dynamic-import-node']}}