vue项目打包后配置服务器地址以及接口超时时间,不需要再次打包

校验是本地运行还是服务器运行,拿到不同的访问地址

// 创建axios实例dev、prod、本地配置的需要改成你们自己的地址
const BASE_URL = process.env.NODE_ENV !== ‘production’ ? ‘http://192.168.1.56:8080’ : window.g.vueAppServerUrl
const service = axios.create({
baseURL: BASE_URL,
timeout: window.s.time // 请求超时时间
});
//创建public文件index.html
手动创建的public文件就是打包后dist里面的index.html
dist是打包后的文件,压缩放到服务器就可以正常运行vue项目了
1.创建一个public文件然后在建一个index.html
2.在axios里面先校验是否是线上或者本地运行的,如果是线上运行就获取配置的地址window.g.vueAppServerUrl(window后面的名字看你自己自定义)
3.打包后生成的index.html就是public里面创建的index.html可以在服务上随便改地址不用再次打包
(这是没有配置反向代理的情况下,如果有配置,可以直接在里面配置)

如果vue3项目打包后无法请求到后台接口,可能是因为以下原因: 1.后台接口路径错误:部分服务器配置可能不同,导致后台接口的路径和本地环境中的路径不一致。因此,需要确保在部署到服务器之前,后台接口的路径是正确的。 2.服务端口号被占用:如果本地环境中使用的端口号在服务器上已被占用,则服务无法启动。因此,需要确保服务端口号是正确的,并且与服务器上的其它服务不冲突。 3.服务器未正确安装相关依赖:如果服务器未正确安装vue3项目所需的相关依赖,则无法正常运行。因此,在部署到服务器之前,需要确保服务器上已经安装了vue3项目所需的相关依赖。 4.浏览器中存在跨域问题:因为vue3项目打包后生成的是静态资源文件,所以在浏览器中可能会遇到 CORS 跨域问题。为避免这种情况,需要在后台配置跨域请求支持,或者使用代理解决跨域问题。 针对上述问题,可以通过以下解决方案来解决: 1.检查后台接口路径是否正确,并确保路径是服务器上的实际路径。 2.检查服务器上的端口号是否正确,避免与其它服务冲突。 3.确保服务器上已经安装了vue3项目所需的相关依赖。 4.使用代理或在后台配置跨域请求支持。 总之,针对以上问题,需要逐一排查,逐步解决,才能保证vue3项目打包后正常部署到服务器并能与后台接口进行正常通讯。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值