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。

相关推荐
fury_1231 天前
vue3:触发自动el-input输入框焦点
javascript·vue.js·elementui
小菜全1 天前
ElementUI 组件概览
前端·vue.js·elementui
今天不要写bug1 天前
基于elementUI实现一个可编辑的表格(简洁版)
前端·javascript·elementui
前端 贾公子2 天前
ElementUI 中 validateField 对部分表单字段数组进行校验时多次回调问题
前端·javascript·elementui
棒棒的唐2 天前
vue2 elementUI 登录页面实现回车提交登录的方法
前端·javascript·elementui
赵得C3 天前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
小菜全3 天前
uniapp基础组件概述
前端·css·vue.js·elementui·css3
浩星3 天前
iframe引入界面有el-date-picker日期框,点击出现闪退问题处理
前端·vue.js·elementui
xrkhy3 天前
ElmentUI之DateTimePicker 日期时间选择器
elementui
xrkhy5 天前
ElementUI之Upload 上传的使用
前端·elementui