Vuejs 中的动态导入

Posted 2023-02-23

【中文标题】Vuejs 中的动态导入

【英文标题】：dynamic imports in Vuejs

【发布时间】：2020-10-27 09:34:51

【问题描述】：

我正在为我的应用程序使用服务器端渲染的 vue（不是使用 vue-cli 引导的）。我的应用程序目前使用 Vue.component() 在我的服务器的 base.html 中加载的 index.js 文件中全局注册所有 vue 组件。

我需要执行代码拆分，以便根据 url 路径仅加载所需的组件，为此我使用动态导入语法来加载组件。

Vue.component('component-a', () => import(/* webpackChunkName: "component-a" */ './component-a.vue'))

我收到以下错误（当前正在加载 http://localhost:8000/dashboard/ 上的组件） 它尝试像这样在/dashboard/<chunk.js> 中搜索块：

GET http://localhost:8000/dashboard/component-a.tmp2hr7_bhp.js net::ERR_ABORTED 404 (Not Found)

还有这个

[Vue warn]: Failed to resolve async component: () => __webpack_require__.e(/*! import() | component-a */ "component-a").then(__webpack_require__.bind(null, /*! ./component-a.vue */ "./dashboard/static/dashboard/scripts/component-a"))
Reason: ChunkLoadError: Loading chunk component-a failed.
(error: http://localhost:8000/dashboard/component-a.tmp2hr7_bhp.js)

我使用没有任何自定义 webpack 配置的基本 vue-cli 引导应用程序对此进行了测试，它工作得很好。不知道为什么这会导致问题在这里也尝试了 babel plugin-syntax-dynamic-import 但没有工作。

不确定，是否存在路径问题（因为它将文件卡盘名称附加到 url 路径），因为 webpack 无法找到块 js 文件...感谢您的帮助！

【参考方案1】：

我认为是路径问题。

尝试在你的 webpack 配置中设置别名（这是 vue-cli 默认使用的）：

 alias: 
      '@': path.resolve(__dirname, 'yourRootFolder')
    

现在像这样在组件路径中使用@。 Vue.component('component-a', () => import(/* webpackChunkName: "component-a" */ '@/component-a.vue'))

【参考方案2】：

假设组件在同一目录中，这是正确的：

Vue.component('component-a', () => import(/* webpackChunkName: "component-a" */ './component-a.vue'))

【参考方案3】：

你的 webpack.config.js 的 output 属性文件名中的文件名是动态创建的，其中有 [name].[chunkhash].js 你可以将其更改为[name].js 如下所述。

output: 
  filename: '[name].js',
  ...
,

我认为这将解决问题。