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。

相关推荐
asdfsdgss2 小时前
Axure 组件不用手绘:ElementUI/Plus 元件库 + 大厂规范现成资源
elementui·axure·photoshop
Joker`s smile2 小时前
vue + elementUI 实现特殊字符(上标、下标、特殊符号等)输入框
vue.js·elementui·特殊字符·unicode字符·上标·下标
theOtherSky16 小时前
element+vue3 table上下左右键切换input和select
javascript·vue.js·elementui·1024程序员节
没逛够2 天前
Vue 自适应高度表格
javascript·vue.js·elementui
console.log('npc')2 天前
使用 Vue3 和 Element Plus 实现选择新增用户集下拉选项框,切换类型,有物业,网格,电子围栏,行政区划管理
javascript·vue.js·elementui
一只小阿乐2 天前
做一个vue3 v-model 双向绑定的弹窗
javascript·vue.js·elementui·vue3·v-model
@AfeiyuO3 天前
el-table 表格嵌套表格
前端·elementui·vue
shuaijie05184 天前
表格单元格输入框转换-其一
javascript·elementui
Z_B_L4 天前
问题记录--elementui中el-form初始化表单resetFields()方法使用时出现的问题
前端·javascript·vue.js·elementui·1024程序员节
Onlyᝰ5 天前
前端tree树
javascript·vue.js·elementui