为什么vue3在第一次加载项目时导入所有页面的所有js文件

Question

Vue 3在第一次加载项目时导入所有Vue组件的所有js文件。我希望vue只导入所需的文件。例如，如果我打开联系人页面，vue3应该只导入contact.js文件。现在它正在导入所有这些文件

<link href="/js/contact.js" rel="prefetch">
<link href="/js/forgot.js" rel="prefetch">
<link href="/js/signin.js" rel="prefetch">
<link href="/js/signup.js" rel="prefetch">
<link href="/js/app.js" rel="preload" as="script">
<link href="/js/chunk-vendors.js" rel="preload" as="script">

这些是我的索引路由器文件：

import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";
import store from "../store";
import {authConstants} from "../_constants";
const routes = [
{
path: "/",
name: "Home",
component:()=>Home,
},
{
path: "/contact",
name: "contact",
component: () => import(/* webpackChunkName: "contact" */ "../views/contact.vue"),
},
{
path: "/signin",
name: "signin",
component: () => import(/* webpackChunkName: "signin" */ "../components/auth/signin.vue"),
},
{
path: "/signup",
name: "signup",
component: () => import(/* webpackChunkName: "signup" */ "../components/auth/signup.vue"),
},
{
path: "/recoverpassword",
name: "recoverPassword",
component: () => import(/* webpackChunkName: "forgot" */ "../components/auth/recoverPassword.vue"),
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
scrollBehavior() {
// document.getElementById("app").scrollIntoView();
},
});
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (!store.getters[authConstants.GET_USER_DATA]) {
next({ name: 'signin' })
} else {
next() // go to wherever I'm going
}
} else {
next() // does not require auth, make sure to always call next()!
}
})
export default router;

并提前感谢您的帮助。

Answer 1

您应该在vue.config.js:中禁用预加载/预取

module.exports =
{
chainWebpack: config =>
{
config.plugins.delete('prefetch'); // for async routes
config.plugins.delete('preload'); // for CSS
return config;
}
};