vue3路由使用createWebHistory部署访问404问题 vite部署访问404问题

本文主要是介绍vue3路由使用createWebHistory部署访问404问题 vite部署访问404问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

默认情况下，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问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---