美文网首页
vue3.0创建生产环境和测试环境

vue3.0创建生产环境和测试环境

作者: Rascar | 来源:发表于2021-03-08 09:26 被阅读0次
    //1. 先创建 .env文件 (在根目录上更src同级)
    NODE_ENV = 'production'
    VUE_APP_FLAG = 'pro'
    
    //2.创建 .env.test文件 (在根目录上更src同级)
    NODE_ENV = 'production'
    VUE_APP_FLAG = 'test'
    outputDir = test
    
    //3.创建test.js 导入mine.js中
    
    let baseURL = ''
    if (process.env.NODE_ENV === 'production') {
        /*第二层if,根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境*/   
        
        if (process.env.VUE_APP_FLAG === 'pro') {
            //production 生产环境
            baseURL = 'https://xogj.ousuiot/api';
     
        } else {
            //test 测试环境
            baseURL = 'http://:9001/api';
     
        }
    } else {
        //dev 开发环境
      baseURL = 'http://:9001/api';
    
    }
    export default baseURL
    
    //4.在axios中引入
    
    //自己的封装的axios
    
    import baseURL from './text'
    
    function request (){
    retrun new Promies((reslove,reject)=>{
        const install = axios.create({
          //请求地址
        baseURL 
    
    })
    
    // 请求拦截
      install.interceptors.request.use((confing)=>{
          let appid = sessionStorage.getItem("appid");
            //拦截token
            if (confing.params) {
                  confing.params.appid = appid;
                } else {
                  confing.data.appid = appid;
                }
               return  confing
            })
    
            // 相应拦截
            install.interceptors.response.use((confing)=>{
               return confing.data
            })
    
            // 发送请求
            install(confing).then((res)=>{
                resolve(res)
            }).catch((error)=>{
                reject(error)
            })
    })
    }
    
    //5 . 在 vue.config.js配置
    module.exports = {
        publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
        outputDir: process.env.outputDir, //打包生成的目录---》配置这个
        // devServer: {
        //     proxy: {
        //         '/api': { // 匹配所有以'/api'开头的请求路径
        //             target: 'http://2a8778o883.imdo.co/travel/', // 代理目标的基础路径
        //             changeOrigin: true, // 支持跨域
        //             pathRewrite: {
        //                 '^/api': '' // 重写路径: 去掉路径开头的'/api'
        //             }
        //         },
        //     }
        // }
    }
    
    //6.package.json里面添加配置文件(在scriipt中配置)
    "scripts": {
        "serve": "vue-cli-service serve",
        "dev": "vue-cli-service serve",
        "test": "vue-cli-service build --mode test" ,
        "build": "vue-cli-service build"
      },

    相关文章

      网友评论

          本文标题:vue3.0创建生产环境和测试环境

          本文链接:https://www.haomeiwen.com/subject/muxpqltx.html