【前端】vue部署问题
我早就想写了,之前部署遇到了很多问题,也没有记录,现在简单记录几个比较重要的点。
后端用go写的,打包为可执行文件,配置文件设置release模式就可以了,没有什么坑点,前端倒是在部署上线有不少问题。
部署后刷新404问题
在nginx的配置文件中加入如下配置
#vue 路由重定向到index.html的配置,用于解决vue页面在浏览器刷新后404的问题
location / {
try_files $uri $uri/ /index.html;
}
这是因为vue打包后是单页应用,任何路由都在index.html
这个文件中,刷新后的路由无法直接找到,需要将任何路由都重定向到index文件。
部署后调用跨域api接口问题
在本地测试可以在vite.json
中配置代理,如:
server: {
proxy: {
'/bgmapi': {
target: 'https://api.bgm.tv',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/bgmapi/, '')
},
'/api':{
target: 'http://digbgmapi.masterkagami.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
},
port: process.env.DIGBGM_PORT
}
然后再axios中定义两个baseURL
const bangumiService = axios.create({
baseURL: '/bgmapi'
})
const digbgmService = axios.create({
baseURL: '/api'
})
通过axios.bangumiService
和axios.digbgmService
的方式使用这两个跨域地址。
这在开发环境是完全ok的,但是线上部署的生产环境我们是通过nginx服务器的,代理是无法生效的,目标url不会自动转发。
解决方法为为nginx配置反向代理,将我们想跨域请求的地址反带到目标地址。
例:
代理目录:/api/
目标URL: http://api.bgm.tv
发送域名: api.bgm.tv