vue项目打包上线操作模板(proxy,axios)

1.在vue.config.js里新建proxy代理(设置开发的端口号)

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false, //是否使用link检查代码
  devServer: {
    proxy:{
      //这个路径为http://192.168.1.182:3000/douyu/wgapi/vod/front/vodrank/getTagVideos
      '/douyu':{
        //target是代理的目标路径
        target:"http://192.168.1.182:3000",
        //pathRewrite重写请求的路径,实际请求的路径没有代理标识douyu,需要把斗鱼重置为空字符串
        pathRewrite:{'^/douyu':''}
      }
    }
  }
});

新建.env文件,放入以下内容

# 全局默认文件,不论什么环境都会加载
# 变量名必须以VUE_APP_开头,比如VUE_APP_XXX

VUE_APP_NAME = 张三
VUE_APP_AGE = 18

新建.env.development文件,放入如下内容(开发模式下)

VUE_APP_AGE = 20
# 开发模式下,使用开发地址
# VUE_APP_URL = /   //未弄多个代理的话,只有基础路径这样配
VUE_APP_URL = /douyu   //多个代理的话,这样配

新建.env.production文件,放入如下内容(生产模式下)

VUE_APP_AGE = 22
VUE_APP_URL = http://open.douyucdn.cn   //生产上线后,用真实地址

然后在axios配置基础路径baseUrl如下

baseURL: process.env.VUE_APP_URL,

也可以按照如下我的博客配置这个基础路径 axios二次封装模板