解决vue动态路由异步加载import组件,加载不到module的问题

确保使用 @babel/plugin-syntax-dynamic-import 插件

首先，要确保安装了 @babel/plugin-syntax-dynamic-import 插件，这个插件可以帮助我们正确解析动态导入语法，保证代码能够正确执行。如果没有安装该插件，可以执行以下命令安装：

npm install --save-dev @babel/plugin-syntax-dynamic-import

在 .babelrc 文件中插入该插件：

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

使用 import 语句动态加载

接下来，在 Vue 组件中使用 import 语句动态加载模块：

export default {
  data() {
    return {
      dynamicComponent: null
    };
  },
  methods: {
    loadComponent() {
      import('./DynamicComponent.vue').then(dynamicComponent => {
        this.dynamicComponent = dynamicComponent.default;
      });
    }
  }
};

需要注意 import 是一个异步函数，需要在 then 方法中处理导入的模块。由于动态组件是默认导出的模块，所以需要通过 module.default 获取动态组件。

配置 Webpack

接下来，在 Webpack 中配置动态组件的加载方式。安装 @babel/plugin-transform-runtime 和 babel-runtime 两个模块，@babel/plugin-transform-runtime 是 Babel 的缩写，是 Babel 7 推荐使用的插件，可以减少重复的代码，babel-runtime 则是一些 Babel 所需的运行时工具的集合。

npm install --save-dev @babel/plugin-transform-runtime babel-runtime

在 .babelrc 文件中插入该插件：

{
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    ["@babel/plugin-transform-runtime", { "corejs": 3 }]
  ]
}

在 Webpack 配置文件中添加如下代码：

module.exports = {
  entry: './src/main.js',
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'index.html')
    })
  ],
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

optimization.splitChunks.chunks 配置项用于告诉 Webpack 使用什么方式拆分代码块。chunks: 'all' 表示将所有的代码块都进行拆分。

示例说明：

1. 创建一个名为 DynamicComponent.vue 的 Vue 组件，并将其放在 src 目录下。

2. 创建一个 App.vue 的 Vue 组件，这个组件调用动态组件，并通过按钮来加载 DynamicComponent.vue 组件。

<template>
  <div>
    <button @click="loadComponent">加载动态组件</button>
    <!-- 调用动态组件 -->
    <component :is="dynamicComponent" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicComponent: null
    };
  },
  methods: {
    loadComponent() {
      // 使用 import 动态加载
      import('./DynamicComponent.vue').then(dynamicComponent => {
        this.dynamicComponent = dynamicComponent.default;
      });
    }
  }
};
</script>

1. 在 src/main.js 文件中引入 Vue 和 App.vue，并创建一个根实例。最后将这个实例挂载到页面中。

import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App)
}).$mount('#app');

1. 在 src 目录下运行 vue-cli-service build 命令进行代码打包。

2. 在浏览器中打开 dist/index.html 文件，点击按钮，可以看到动态组件已经成功加载。