乘风原创程序

    当前位置:首页>>编程开发>>vue.js>>vue异步组件与组件懒加载问题(import不能导入变量字符串路径)
  • vue异步组件与组件懒加载问题(import不能导入变量字符串路径)
  • 2022/4/1 12:59:06
  • vue异步组件与组件懒加载

    在写项目的时候,需要动态配置路由菜单,所有的菜单都是通过配置生成的,这就意味着菜单的路径(在vue开发项目里面就是一个字符串的路径)需要异步加载进去,但是由于对webpack的import不是很熟悉,所以就有一下的坑需要填了

    错误的原因分析

    _import.js
    module.exports = file => () => import(file)
    

    在这里插入图片描述

    但是这种方法错误的原因是:

    webpack 编译es6 动态引入 import() 时不能传入变量,例如dir =’path/to/my/file.js’ ; import(dir) , 而要传入字符串 import(‘path/to/my/file.js’),这是因为webpack的现在的实现方式不能实现完全动态。

    解决方案一

    可以通过字符串模板来提供部分信息给webpack;例如import(./path/${myfile}), 这样编译时会编译所有./path下的模块,但运行时确定myfile的值才会加载,从而实现懒加载。

    在这里插入图片描述

    解决方案二

    function lazyloadview(asyncview) {
      const asynchandler = () => ({
        component: asyncview,
          // a component to use while the component is loading.
        loading: require('@/view/system/loading.vue').default,
          // a fallback component in case the timeout is exceeded
          // when loading the component.
        error: require('@/view/system/timeout.vue').default,
          // delay before showing the loading component.
          // default: 200 (milliseconds).
        delay: 200,
          // time before giving up trying to load the component.
          // default: infinity (milliseconds).
        timeout: 10000
      });
      return promise.resolve({
        functional: true,
        render(h, { data, children }) {
            // transparently pass any props or children
            // to the view component.
          return h(asynchandler, data, children);
        }
      });
    }
    const my = () => lazyloadview(import('@/view/my.vue'));
    const router = new vuerouter({
      routes: [
        {
          path: '/my',
          component: my
        }
      ]
    })
    

    通过上述两种方法都能够解决 动态组件的懒加载效果

    vue懒加载组件 路径不对

    最近在使用vuerouter的懒加载组件的时候.

    const routes = [
    ? ? {
    ? ? ? ? path: '/',
    ? ? ? ? component: app
    ? ? },
    ? ? {
    ? ? ? ? path: '/category',
    ? ? ? ? component: resolve => {require(['./components/category.vue'], resolve)}
    ? ? }
    ]

    但是在加载/category的时候,我发现会报错。

    原来webpack会把这个懒加载单独加载一个js,默认按照

    0.app.js 1.app.js ……的顺序加载的

    通过简单的debug发现是0.app.js的路径不对

    通过webpack的设置即可解决(我使用的laravel,配置根据情况自行修改)

    elixir.webpack.mergeconfig({
    ? ? module: {
    ? ? ? ? loaders: [
    ? ? ? ? ? ? {
    ? ? ? ? ? ? ? ? test: /\.css/,
    ? ? ? ? ? ? ? ? loader: "style!css"
    ? ? ? ? ? ? }
    ? ? ? ? ]
    ? ? },
    ? ? output: {
    ? ? ? ? publicpath: "js/"
    ? ? }
    })

    配置下output下的publicpath即可。 

    以上为个人经验,希望能给大家一个参考,也希望大家多多支持本教程网。