Vue-Router 中的动态路由在开发中有效，但在部署中无效

Question

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

示例：

根 URLS 工作：

localhost:8080/arbq/panel - 有效
mydomain.com/arbq/panel/ - 有效

动态 URL 在本地工作但不托管：

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 > 配置 > 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，您将需要配置您的服务器或者可能更改 [=10] 的模式=] 到 hash 这将起作用，因为它通过不刷新 URL 来模拟历史模式，我知道它应该是一个评论，但我不能 post 抱歉。希望对您有所帮助！

Vue-Router 中的动态路由在开发中有效，但在部署中无效

Dynamic routes in Vue-Router work in Development but not Deployment

routing

webpack

vue.js

vue-router