vue3没有config文件，需要配置webpack的时候，需要在根目录下，新建vue.config.js
通过下来方法实现跨域
1.新建vue.config.js
module.exports = {
outputDir: 'dist', // build输出目录 ，默认dist
lintOnSave: false,// 是否开启eslint
publicPath: '/',//配置项目路径
devServer: {
open: true, // 是否自动弹出浏览器页面
host: '0.0.0.0',//主机，0.0.0.0支持局域网地址，可以真机测试
port: '8080',
https: false, // 是否使用https协议
hotOnly: false, // 是否开启热更新
proxy: {
// 配置跨域
'/api': {
target: 'http://vueshop.glbuys.com/api',//接口地址
ws: true,//// 代理websockets
changOrigin: true,// 虚拟的站点需要更管origin
pathRewrite: {
'^/api': ''
}
}
}
},
}
image.png
2.在config.js
export default {
// baseURL:'http://vueshop.glbuys.com/api',
// baseURL:'/api',
baseURL:process.env.VUE_APP_API,
token:"1ec949a15fb709370f"
}
3.在main.js
import { createApp } from 'vue'
const app = createApp(App)
// 挂载到vue原型上(方法1)
app.config.globalProperties.$axios = Axios.create({
// baseURL key一定要这样写
baseURL: config.baseURL
});
本地跨域解决，但是线上打包有问题，怎么解决，区分开发和生产环境
1.在根目录下新建.env.development
VUE_APP_API = '/api'
2.在根目录下新建.env.production
VUE_APP_API = 'http://vueshop.glbuys.com/api'
3.config.js
baseURL:process.env.VUE_APP_API,
