我正在设置我的路由器按照本指南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:
<router-link class="nav-link text-uppercase"
:to="{name: 'PageWaitingRoom'}"
exact>
Waiting Room
</router-link>
一切正常,直到我使用webpack使用UglifyJsPlugin进行生产构建,路由器链接不解析url,它总是指向root url。我必须改变路由器链接,不要像这样使用name
:
<router-link class="nav-link text-uppercase"
to="/customer-care/manage-business/waiting-room"
exact>
Waiting Room
</router-link>
但是我不希望这样做,我指的是在路由器链接中使用组件名称,因为我很快就会很容易在将来更改URL。
这个问题只发生在我使用UglifyJsPlugin时,我不确定我错过了什么。有人像我这样面对这个问题吗?请给我建议。
谢谢!
如果您希望首选版本工作,则需要禁用修改,如下所示:
new webpack.optimize.UglifyJsPlugin({
mangle: false
})
这应该可以阻止它弄乱您的路由名称,但请注意,这也会阻止代码的混淆。您可以进行Google搜索以确定这是否是一个问题。有些人说是,其他人没有。
我已经在我的最新应用程序中禁用了此选项,其原因是,如果有人确定,将PageWaitingRoom
重命名为xyz
不会阻止它们,只会减慢它们的速度。
实际上我没有用字符串命名路径,但是我使用了组件的name
作为路由名称,如下所示,它使我的愚蠢的问题大声笑:
const Routes = [
{
path: '/customer-care/manage-business/waiting-room',
component: PageWaitingRoom,
name: PageWaitingRoom.name //<-- UglifyJsPlugin will do its business and cause the route issue.
//name: 'PageWaitingRoom' <-- Should use this
}
]