Vue路由器总是在初始加载时加载懒加载模块。

Question

下面是使用Vue官方路由器实现懒加载的代码：

src/router/index.js

import Vue from "vue";
import VueRouter from "vue-router";

const Foo = () => import("@/components/Test2");

const Bar = () => import("@/components/Test");

Vue.use(VueRouter);

export default new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/test",
      name: "test",
      component: Bar
    },
    {
      path: "/test2",
      name: "test2",
      component: Foo
    }
  ]
});

src/main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  router
}).$mount("#app");

路由的功能符合预期，但是懒加载没有正常工作，在第一次加载时，我检查了网络选项卡，发现能够看到由webpack生成的延迟加载文件。

- shellakkshellu

Answer 1

问题在于webpack preload插件会向所有异步块添加预取标签。为了防止这种情况发生，请将以下内容添加到您的vue.config.js中。

  chainWebpack: config => {
    config.plugins.delete('prefetch');
  }

Source: https://github.com/vuejs/vue-cli/issues/979#issuecomment-373027130

- ChuckFields

Answer 2

我相信你的方法有点不对。

如果你想启用块分割，并延迟加载路由组件，你的方法应该是这样的：

src/router/index.js

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

export default new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/test",
      name: "test",
      component: () => import(/* webpackChunkName: "bar" */ '@/components/Test.vue')
    },
    {
      path: "/test2",
      name: "test2",
      component: () => import(/* webpackChunkName: "foo" */ '@/components/Test2.vue')
    }
  ]
});

这将创建名为'bar'和'foo'的单独块，仅在进入路由时才会进行延迟加载。

- Karolis Stakėnas

---

我尝试了这个解决方案，但仍然是一样的。只有完全重启后才能工作 :) - shellakkshellu

第一次它运行正常，但在清除缓存之后再加载它又出现了。 - shellakkshellu

因为这个解决方案似乎与问题中的版本相同，只是这里明确命名了块，所以被踩了。 - xiGUAwanOU