vue異步組件與組件懶加載問題怎么解決

本篇內容主要講解“vue異步組件與組件懶加載問題怎么解決”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue異步組件與組件懶加載問題怎么解決”吧!

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即可。 

到此，相信大家對“vue異步組件與組件懶加載問題怎么解決”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！