vue3.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"
  },
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容