Question

我使用Vue-Cli和Vue-Router在Vue中构建了一个小型单页应用程序，并使用动态路由匹配，如此处所述[1]。在本地开发期间一切正常，但由于某种原因，动态页面/路由不会在构建后加载（导致404错误）。其他路由（例如，我的项目的根页面）在构建之后工作正常。我认为这可能是一个webpack配置问题。

示例：

Root URLS工作：

localhost：8080 / arbq / panel - works
mydomain.com/arbq/panel/ - 作品

动态网址在本地运作但未托管：

localhost：8080 / arbq / panel / 123 - 作品
mydomain.com/arbq/panel/123 - 404错误（不加载）

Routes.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Controller from '@/components/Controller'
import Default from '@/components/Default'

Vue.use(VueRouter)

export default new VueRouter({
    mode: 'history',
    base: '/arbq/panel',
    routes: [
        {
            path: '/:id',
            name: 'controller',
            component: Controller
        },
        {
            path: '/',
            component: Default
        }
    ]
 })

来自Webpack＆gt;配置＆gt; Index.js

build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),

// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/arbq/panel/',

...

如果您发现任何可能妨碍路线正确映射的内容，请告诉我们，谢谢！

http [1]：https://router.vuejs.org/en/essentials/dynamic-matching.html

Answer 1

您应该检查vue-router历史记录模式，如页面上所述，您应该查看HTML5 vue-router's page，您需要配置服务器或更改{{1的模式}} vue-router，这将有效，因为这通过不刷新URL模拟历史模式，我知道它应该是一个评论，但我不能发布抱歉。希望这能帮到你！

Vue-Router中的动态路由在开发中工作，但不在部署中工作

1 个答案: