webpack4 - 动态导入文件 dynamic-import 报错的解决方法

介绍

webpack4动态导入文件报错,按照错误提示安装了插件,但未果。。

最后查到一个可行方案,记录如下。


1.通过懒加载的方式动态引入文件

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

2.报错如下所示

g 复制代码
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):

解决方案

一:安装插件 babel-plugin-dynamic-import-webpack

handlebar 复制代码
npm install babel-plugin-dynamic-import-webpack --save-dev

二:在配置文件的module的rules下进行插件的配置,如下

javascript 复制代码
{
    test: /\.js/,
    use: [{
        loader: 'babel-loader', 
        options: {//如果有这个设置则不用再添加.babelrc文件进行配置
            "babelrc": false,// 不采用.babelrc的配置
            "plugins": [
                "dynamic-import-webpack"
            ]
        }
    }]
}

OK。

相关推荐
硅谷工具人1 天前
基于element-plus封装table组件
elementui·el-table封装
咚咚咚小柒1 天前
【前端】用el-popover做通用悬停气泡(可设置弹框宽度)
前端·javascript·vue.js·elementui·html·scss
Stringzhua1 天前
ElementUi【饿了么ui】
前端·ui·elementui
尔嵘1 天前
vue2+elementUi实现自定义表格框选复制粘贴
前端·javascript·elementui
星光一影1 天前
HIS系统天花板,十大核心模块,门诊/住院/医保全流程打通,医院数字化转型首选
java·spring boot·后端·sql·elementui·html·scss
博客zhu虎康2 天前
Element中 el-tree 如何隐藏 Tree 组件中的父节点 Checkbox
javascript·vue.js·elementui
我总是词不达意3 天前
vue3 + el-upload组件集成阿里云视频点播从本地上传至点播存储
前端·vue.js·阿里云·elementui
通往曙光的路上3 天前
day9_elementPlus2
javascript·vue.js·elementui
Queen_sy6 天前
vue3 el-date-picker 日期选择器校验规则-选择日期范围不能超过七天
javascript·vue.js·elementui
左手吻左脸。7 天前
解决el-select因为弹出层层级问题,不展示下拉选
javascript·vue.js·elementui