vue異步組件與組件懶加載問題(import不能導入變量字符串路徑)

更新時間：2022年04月01日 09:16:16 作者：Alecor

這篇文章主要介紹了vue異步組件與組件懶加載問題(import不能導入變量字符串路徑)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue異步組件與組件懶加載

在寫項目的時候，需要動態(tài)配置路由菜單，所有的菜單都是通過配置生成的，這就意味著菜單的路徑（在vue開發(fā)項目里面就是一個字符串的路徑）需要異步加載進去，但是由于對webpack的import不是很熟悉，所以就有一下的坑需要填了

錯誤的原因分析

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

在這里插入圖片描述

但是這種方法錯誤的原因是：

webpack 編譯es6 動態(tài)引入 import() 時不能傳入變量，例如dir =’path/to/my/file.js’ ； import(dir) , 而要傳入字符串 import(‘path/to/my/file.js’)，這是因為webpack的現(xiàn)在的實現(xiàn)方式不能實現(xiàn)完全動態(tài)。

解決方案一

可以通過字符串模板來提供部分信息給webpack；例如import(./path/${myFile}), 這樣編譯時會編譯所有./path下的模塊，但運行時確定myFile的值才會加載，從而實現(xiàn)懶加載。

在這里插入圖片描述

解決方案二

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
    }
  ]
})

通過上述兩種方法都能夠解決動態(tài)組件的懶加載效果

vue懶加載組件路徑不對

最近在使用VueRouter的懶加載組件的時候.

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

但是在加載/category的時候，我發(fā)現(xiàn)會報錯。

原來webpack會把這個懶加載單獨加載一個js，默認按照

0.app.js 1.app.js ……的順序加載的

通過簡單的debug發(fā)現(xiàn)是0.app.js的路徑不對

通過webpack的設(shè)置即可解決（我使用的laravel，配置根據(jù)情況自行修改)

Elixir.webpack.mergeConfig({
? ? module: {
? ? ? ? loaders: [
? ? ? ? ? ? {
? ? ? ? ? ? ? ? test: /\.css/,
? ? ? ? ? ? ? ? loader: "style!css"
? ? ? ? ? ? }
? ? ? ? ]
? ? },
? ? output: {
? ? ? ? publicPath: "js/"
? ? }
})

配置下output下的publicPath即可。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: