Vite2+Vue3系列项⽬，nginx部署常见404，500等问题随着vue3成为默认版本，国内的开发者接触vite越来越多，其中原因其实就⼀个字：快。详细请看
在这种组合项⽬在部署时候经常会遇到这样或那样的问题，接下对于部署的时候遇到的⼀些问题罗列以及⼀些解决⽅案：
nginx部署如图：
nginx配置
1.部署后资源⽂件访问不对
访问资源js路径404
解决⽅案：在fig.production.ts(⽣产环境的配置⽂件)，对应的base属性设置要部署的⽬录‘/arcodesignpro/’，如下图：
参考⽂档：
2.部署在⾮根服务⽬录下，如：部署在下，路由跳转不正确问题；
解决⽅案：因为项⽬使⽤vue-router4，api上⾯有变动，需要在createWebHistory⽅法写⼊对应参数，如下官⽅⽂档截图：
修改完成后，跳转正确：
3.访问页⾯⼦路由后刷新页⾯404；
解决⽅案：修改nginx配置⽂件
nginx部署前端项目修改后刷新对应的路由均可以访问正常：
4.访问页⾯⼦路由后刷新页⾯500；
这种情况⼀般是nginx⽤的root指向部署⽂件路径导致多出⼀层⽬录，访问不到⽂件⽽报错，我⼀般⽤alias，它指向的就是对应的实际⽬录不会增加访问的路由。
⽤法：
1#alias
2location /i/{
3    alias /usr/local/nginx/html/admin/；
4}
5#若按照上述配置的话，则访问/i/⽬录⾥⾯的⽂件时，ningx会⾃动去/usr/local/nginx/html/admin⽬录⽂件。
6
7
8#root
9location /i/ {
10    root /usr/local/nginx/html/admin；
11}
12#若按照这种配置的话，则访问/i/⽬录下的⽂件时，nginx会去/usr/local/nginx/html/admin/i下⽂件
所以如果想root的话需要把dist⾥⾯创建“arcodesignpro”⽂件夹，然后把dist⾥⾯所有⽂件拷贝到“arcodesignpro”即可；

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。