javascript - vuejs router-link 在延迟加载路由中不起作用

Question

我正在按照本指南设置我的路由器 https://router.vuejs.org/en/advanced/lazy-loading.html

const PageWaitingRoom= () => import(/* webpackChunkName: "group-CCManageBusiness" */'./../pages/customer-care/manage-business/PageWaitingRoom');
const Routes = [
  {
      path: '/customer-care/manage-business/waiting-room',
      component: PageWaitingRoom,
      name: PageWaitingRoom.name
   }
]

在另一个页面中，我使用这样的路由器链接:

<router-link class="nav-link text-uppercase"
             :to="{name: 'PageWaitingRoom'}"
             exact>
        Waiting Room
</router-link>

一切正常，直到我使用 webpack 通过 UglifyJsPlugin 进行生产构建，路由器链接不解析 url，它总是指向根 url。我必须将路由器链接更改为不使用这样的 name:

<router-link class="nav-link text-uppercase"
             to="/customer-care/manage-business/waiting-room"
             exact>
      Waiting Room
</router-link>

但我不想那样做，我指的是在路由器链接中使用组件名称，因为将来更改 url 对我来说很快且容易。

这个问题只在我使用 UglifyJsPlugin 时发生，我不确定我错过了什么。有人像我一样面临这个问题吗？请给我建议。

谢谢!

Answer 1

如果你想让你喜欢的版本工作，你需要禁用 mangling，像这样:

new webpack.optimize.UglifyJsPlugin({
  mangle: false
})

这应该会阻止它弄乱您的路由名称，但请注意，这也会阻止代码的混淆。您可以进行 Google 搜索以确定这是否是一个问题。有人说是，有人说不是。

我在我最新的应用程序中禁用了这个选项，原因是如果有人足够坚定，将 PageWaitingRoom 重命名为 xyz 不会阻止他们，只会变慢