Javascript Vuejs中的动态导入

我正在为我的应用程序使用服务器端呈现的vue（不是使用vue cli引导）。我的应用程序当前使用index.js文件中的vue.component（）全局注册所有vue组件，该文件加载到我的服务器的base.html中

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

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

我得到以下错误（当前正在

http://localhost:8000/dashboard/

） 它尝试在

/dashboard/

中搜索块，如下所示：

GEThttp://localhost:8000/dashboard/component-a、 tmp2hr7_bhp.js net:：ERR_中止404（未找到）

还有这个

[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)

我使用一个基本的vue cli bootstapped应用程序测试了这一点，没有任何自定义的webpack配置，效果很好。不知道为什么会出现问题，也尝试了babel

插件语法动态导入

，但没有成功

---

不确定，是否存在路径问题（因为它将文件名附加到url路径），因为webpack无法找到区块js文件。。。谢谢你的帮助

我认为这是一个路径问题

尝试在网页包配置中设置别名（这是vue cli默认使用的）：

现在在组件路径中使用@，如下所示。 Vue.component（'component-a'，（）=>import（/*webpackChunkName:“component-a”*/

---

“@/component-a.vue”）

我认为这是一个路径问题

尝试在网页包配置中设置别名（这是vue cli默认使用的）：

现在在组件路径中使用@，如下所示。 Vue.component（'component-a'，（）=>import（/*webpackChunkName:“component-a”*/

---

“@/component-a.vue”）

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

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

---

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

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

---

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

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

---

我认为这将解决问题。

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

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

我认为这将解决这个问题