webpack4 動態導入文件 dynamic-import 報錯的解決方法


webpack4動態導入文件報錯,按照錯誤提示安裝了插件,但未果,最后查到一個可行方案,記錄如下:
1.通過懶加載的方式動態引入文件

const router = new Router({
    routes: [{
        path: '/home',
        name: 'Home',
        component: () =>
            import('./views/home/Home.vue')
    }]
})

2.報錯如下所示

ERROR in ./src/router.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\practice\vue-pro\webpack-vue-create\src\router.js: Support for the experimental syntax 'dynamicImport' isn't currently enabled (19:13):

3.解決方案

一:安裝插件babel-plugin-dynamic-import-webpack
npm install babel-plugin-dynamic-import-webpack --save-dev
二:在配置文件的module的rules下進行插件的配置,如下

{
    test: /\.js/,
    use: [{
        loader: 'babel-loader', 
        options: {//如果有這個設置則不用再添加.babelrc文件進行配置
            "babelrc": false,// 不采用.babelrc的配置
            "plugins": [
                "dynamic-import-webpack"
            ]
        }
    }]
}

如此,問題就解決了!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM