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

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





// 开发环境 .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中配置基础



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']
    }
  }

https://blog.csdn.net/weixin_66557048/article/details/144767864?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522989f843efc8010197ec9a737a2c72451%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=989f843efc8010197ec9a737a2c72451&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-144767864-null-null.142^v102^pc_search_result_base7&utm_term=vue3%E9%85%8D%E7%BD%AE%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83&spm=1018.2226.3001.4187