首页 文章

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

提问于
浏览 次
1

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

Example:

根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
        }
    ]
 })

From Webpack > Config > 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

webpack vue.js routing vue-router

1 回答

  • 1

    您应该检查vue-router历史模式，如页面上所述，您应该检查HTML5 vue-router's page，您需要配置您的服务器或者可能将 vue-router 的模式更改为 hash ，这将起作用，因为它模拟了历史模式没有刷新URL，我知道它应该是一个评论，但我不能发布抱歉 . 希望这对你有所帮助！

    回复于

相关问题