.htaccess Vue路由器v4 HTML5历史模式在重新加载和直接链接时出现问题

vojdkbi0  于 2023-01-13  发布在  HTML5
关注(0)|答案(1)|浏览(163)

我在我的Web服务器的子目录中创建了一个Vue3的简单示例:

https://tokant.com/vue-router-transition-v2/

导航到不同的导航链接可以正常工作,在homeabout上刷新浏览器也可以正常工作。但是,在最后两个链接(使用 * Dynamic Route Matching with Params )上,存在一个问题:这main.js文件不能被检索因为它变成相对到这*/users/路径并且不是这应用根.
我的路由器
createWebHistory***base * path或. htaccess一定有问题,但我尝试了许多可能性都没有成功。
路由器和路由设置如下:

const routes = [
    { path: '/', name: 'home', component: Home },
    { path: '/about', name: 'about', component: About },
    { path: '/users/:id', name: 'user', component: User },
    { path: '/:pathMatch(.*)*', name: 'notfound', component: NotFound }
]
const router = createRouter({
    // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
    history: createWebHistory('/vue-router-transition-v2'),
    routes, // short for `routes: routes`
})

. htaccess看起来像这样:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /vue-router-transition-v2/index.html [L]
</IfModule>

有人知道为什么刷新使用动态路由的页面时不使用基路径吗?
重要信息:应用程序的创建不需要构建步骤。

ekqde3dh

ekqde3dh1#

从vue-router文档中:
如果部署到子文件夹,则应使用Vue CLI的publicPath选项和路由器的相关基本属性。
您缺少publicPath部分,并且未使用vue-cli构建应用程序。
有什么理由让你部署应用程序而不构建它吗?构建你的应用程序对于缩小你的源文件,捆绑和树摇动你的库以及缓存破坏你部署的任何新更新是必不可少的。
如果SEO对你来说不重要,你可以切换到哈希模式

相关问题