由于SPA(单页面)应用的history模式和传统的并无区别,当你使用浏览器的刷新功能时,会重新请求服务器,但是url会变成路由的url 如https://test_router.com/images/a.jpg在SPA打包的路径一般没有这样的路径,所以会导致404找不到资源的错误出现,这种经由上面的nginx配置会直接返回index.html然后再由vue-router去解析渲染...
1、router/index.ts history:设置成history模式,设置 base (即 createWebHistory 参数):为设置为"你的文件夹名称" 或 根据环境 自己配置 2、 2.1、package.json 2.2、vite.config.ts "base" ?"/你的文件夹名称/" : "/" nginx中使用 3、nginx.conf nginx.conf新增一个location /你的文件夹名称 {},注意...
{// 404路由path:'/404',name:'404',component:()=>import('/@/views/404.vue') }, ];/** * 创建路由 */constrouter =createRouter({// hash模式:createWebHashHistory,// history模式:createWebHistoryhistory:createWebHistory("/"),// history:createWebHashHistory("/#"),routes, });/** * ...
我原以为是vue的问题,通过百度查看发现是nginx的问题,由于vue在打包后只有一个页面,index.html作为入口页面,所有其他路由地址都是由js处理的,导致在nginx下直接访问其他地址是没有找到页面的,所以直接抛出了404错误。 最终在router.vuejs.org的 网上找到答案对所有的地址从定向到index上。 解决方案 https://router.v...
vue3 + vite + nginx 在服务器上部署后打开首页都没问题,打开其他路径全部 404。 nginx 报错日志:No such file or directory 其实查看 build 后的dist文件夹可以发现,只有一个index.html,当你访问别的路径时nignx查找不到所以就报错了 解决方案: 在nginx.conf 中添加:try_files $uri $uri/ /index.html; ...
history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', redirect: '/home', }, { path: '/index/home', component: () => import('../views/index/Home.vue'), }, { path: '/home', component: () => import('../views/home/Index.vue'), ...
首先，我们在 Vue3 中使用 createWebHistory() 来创建优雅的路由：2. 服务器配置 针对不同的服务器类型，配置方法略有不同。以下是一些常见服务器的配置示例：Nginx 配置 对于使用 Nginx 服务器的用户，可以在 Nginx 的配置文件中添加如下规则：详细解析 server { ... } 这是 Nginx 配置文件中的一个 server ...
最近遇到需要配置二级域名的情况,使用vue-cli3、router与nginx配置的时候,遇到了各种各样的问题。在这里记录一下成功方法。1、使用vue-cli创建一个新手项目...
但是项目打包上线以后出现二级页面 404 的问题。例如 /about 页面。刷新就会出现 404 。或者直接复制二级页面重新打开同样也是 404。 最终经过一番搜索,解决方案如下: Nginx 例如使用 Nginx 部署,须做如下修改即可 代码语言:javascript 复制 location/{error_page404/index.html;} ...
当使用History时URL中不带#,请求服务器时将整个URL发送给服务端,如果没有进行相关的路由配置处理,服务端会不认识,返回404或空白页面,所有使用History模式需要后台对路由地址进行相应的处理。 详细可以查看Vue Router官网HTML5History模式 3、Vue-Router构建选项配置: ...