行业门户网站,妇科医院网站优化服务商,网页广告费一般多少钱,门户网站做啥第一步#xff1a;在src同级新建 .env.production 、.env.test 、.env.development文件 第二步#xff1a;在文件中配置开发环境、生产环境、测试环境 // 开发环境 .env.developmentNODE_ENV developmentVUE_APP_MODE development outputDir dist_dev // 打出包的名称VUE_…第一步在src同级新建 .env.production 、.env.test 、.env.development文件 第二步在文件中配置开发环境、生产环境、测试环境 // 开发环境 .env.developmentNODE_ENV developmentVUE_APP_MODE development outputDir dist_dev // 打出包的名称VUE_APP_BASE_URL http://xxxxxxxxx:xxxx/// 生产环境 .env.productionNODE_ENV productionVUE_APP_MODE productionoutputDir 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]}}
