vue 路由懒加载问题

 

//const Home = import('../views/Home') 这个是直接加载  下面的两个都是使用懒加载
const Home  = () => import('../views/Home')
//const Home = (resolve) => require(['../views/Home'],resolve)

const routes = [
  {
    path: '/',
    name: '首页',
    component: Home
  },
  {
    path: '/test',
    name: '测试',
    component: () => import('../views/Test')
    //component: (resolve) => require(['../views/Test'],resolve)
  }
]

 

 

在vue.config.js 中配置

module.exports = {
  //配置访问地址
  publicPath: '/myweb',
  chainWebpack: config => {

    // <link rel="prefetch"> 是一种 resource hint，用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容。
    // 默认情况下，一个 Vue CLI 应用会为所有作为 async chunk 生成的 JavaScript 文件 (通过动态 import() 按需 code splitting 的产物) 自动生成 prefetch 提示。
    // 这些提示会被 @vue/preload-webpack-plugin 注入，并且可以通过 chainWebpack 的 config.plugin('prefetch') 进行修改和删除。
    // prefetch 导致浏览器提前加载数据，导致误以为路由的懒加载出问题。可以移除 prefetch 不让浏览器提前加载
    config.plugins.delete('prefetch')
  }
}

 

 参考https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch