第一步：在src同级新建 .env.production 、.env.test 、.env.development文件
第二步：在文件中配置开发环境、生产环境、测试环境
typescript
// 开发环境 .env.development
NODE_ENV = 'development'
VUE_APP_MODE = 'development'
outputDir = dist_dev // 打出包的名称
VUE_APP_BASE_URL = http://xxxxxxxxx:xxxx/
// 生产环境 .env.production
NODE_ENV = 'production'
VUE_APP_MODE = 'production'
outputDir = dist_pro
VUE_APP_BASE_URL = http://xxxxxxxxx:xxxx/
// 测试环境 .env.test
NODE_ENV = 'alpha' // 此处不能为test，否则会报错
VUE_APP_MODE = 'alpha'// 此处不能为test，否则会报错
outputDir = dist_test
VUE_APP_BASE_URL = http://xxxxxxxxxxxx:xxxx/第三步：在axios.js中配置基础
typescript
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中配置基础
typescript
"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中配置基础
typescript
compact: false, // 加上此项配置
env: {
development: {
plugins: ['dynamic-import-node']
}
}