本文主要是介绍vue3路由使用createWebHistory部署访问404问题 vite部署访问404问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
vue3路由使用createWebHistory部署访问404问题 vite部署访问404问题
- 开始配置
- 修改vite.config.js
- 修改 router/index.js 路由模式
- 修改Nginx
默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上
例如 http://www.liyangme.top.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。
例如，应用被部署在 http://www.liyangme.top.com/demo/，则 base需要配置 为 /demo/
这个问题只有 路由模式为 createWebHistory(H5模式)才会出现，如果使用的是 # 这样的路由则不会出现
开始配置
修改vite.config.js
修改 base 为 /demo/, 具体根据你的应用名称来
修改 router/index.js 路由模式
修改createWebHistory中的路径，与 vite.config 中的 base路径一致
const router = createRouter({history: createWebHistory('/demo/'),routes: constantRoutes,scrollBehavior(to, from, savedPosition) {if (savedPosition) {return savedPosition;} else {return { top: 0 };}},
});export default router;
修改Nginx
server {listen 9999;server_name localhost;error_page 404 /404.html;error_page 500 502 503 504 /50x.html;location /demo{# windows方式# alias "E:\\apps\\nginx-1.24.0\\nginx-1.24.0\\html\\demo";# Linux方式alias "/apps/nginx-1.24.0/nginx-1.24.0/html/demo";# Linux方式 二# alias /apps/nginx-1.24.0/nginx-1.24.0/html/demo;# 解决刷新404问题try_files $uri $uri/ /demo/index.html;}}
这篇关于vue3路由使用createWebHistory部署访问404问题 vite部署访问404问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
