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二次封装模板