我需要开发一个具有登录 View 的服务器端身份验证的应用程序。如果我想使用Vue Router在登录和索引( protected View )之间动态切换,我需要避免在成功身份验证之前登录 View 下载(预取)索引,因为如果没有,服务器将用登录页面回答索引预取请求。
我试图在具有两条路由的原始 Vue Router 示例中实现此目的。家及周围。第一个被包含,第二个被延迟加载(但预取),这将是真实应用程序中的 protected 页面。
为了避免预取,我已经尝试了所有我找到的 webpack 魔法注释,但预取仍然发生。
这是代码:
import Vue from "vue"
import VueRouter from "vue-router"
import Home from "../views/Home.vue"
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/about",
name: "About",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about"*/ /* webpackMode: "lazy" */ /* webpackPrefetch: false */ /* webpackPreload: false */ "../views/About.vue")
}
];
const router = new VueRouter({
routes
});
export default router;
结果如下:
我不想从常规 webpack 配置中禁用该功能,因为我希望它用于其余的应用程序链接。我只想为此链接禁用它。
我应该如何配置路由器来实现它?
感谢您的宝贵时间,
H25E
最佳答案
有一个discussion on Github其中提供了一些与您的情况相关的提示。
// vue.config.js
module.exports = {
chainWebpack: config => {
config.plugin('prefetch').tap(options => {
options.fileBlackList.push([/MyChunkName(.*)\.js$/]);
return options;
});
}
};
Vue-CLI 默认情况下会自动预取所有动态导入 - 因此您必须添加黑名单。
Webpack 的神奇注释(webpackPrefetch
也可能是 webpackPreload
)接受 true
或数字(索引) - 但不接受false
参数。
关于vue.js - Lazy Route 被预取,忽略 webpack 魔法注释 (Vue),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61672380/