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

第一步:在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']
    }
  }
相关推荐
九亿少女的梦@1 分钟前
企业微信对接:回调地址带#时返回地址参数位置不对的问题
vue·企业微信·企微单点登录
你脸上有BUG15 分钟前
Css实现悬浮对角线边框动效
前端·css·动画
烛阴31 分钟前
开发者神器:如何在浏览器控制台玩转第三方库,让调试效率翻倍!
前端·javascript
crary,记忆39 分钟前
Module Federation 和 Native Federation 的比较
前端·webpack·angular
why技术1 小时前
翻译翻译,什么叫“编程专用”的显示器?
前端·后端
拉不动的猪1 小时前
JQ常规面试题
前端·javascript·面试
海上彼尚1 小时前
Monorepo + PNPM 搭建高效多项目管理
前端·js·源代码管理
Random_index2 小时前
#Uniapp篇:chrome调试&&unapp适配
前端·chrome·uni-app
Shimeng_19892 小时前
前端如何通过(手机)扫描二维码下载app
前端·javascript·vue.js·二维码·扫描二维码下载软件app
一只一只妖2 小时前
前端导出带有合并单元格的列表
前端