vue.js - 延迟路由被预取,忽略 webpack 魔术注释(Vue)
问题描述
我需要开发一个带有登录视图的服务器端身份验证应用程序。如果我想使用 Vue Router 在登录和索引(受保护的视图)之间动态切换,我需要避免登录视图在成功认证之前下载(预取)索引,因为如果没有,服务器会以登录页面响应索引预取要求。
我试图在具有两条路由的原始 Vue 路由器示例中实现这一点。家和周围。第一个包含在内,第二个是延迟加载(但预取),这将是实际应用程序中的受保护页面。
为了避免预取,我已经尝试了我发现的所有 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
解决方案
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
参数。
推荐阅读
- python - 使用 matplotlib 和 geopandas 在地图上用不同的投影注释标签时遇到问题
- pytorch - Pytorch 用户对旧 GPU 的警告
- html - How to set color from API response in border-color in Angular?
- python - 按钮 tkinter python 周围的选择框
- node.js - 将图像字段添加到现有表单并将其上传并检索到 React.js+Node.js+MSSQL 应用程序中的数据库
- java - 有没有一种方法可以通过使用 Cursor 和 Uri 将歌曲导入其中来在 ListView 中播放歌曲?
- java - 为什么 Java Debugger 会随机进入内部方法?
- javascript - 如何将 blob 转换为 png 或 jpg?
- java - 使用新的 Amazon S3 Java SDK V2 拒绝访问
- javascript - 是否可以使用 google app 脚本将 POST 设置为在客户端?