Vuejs中的动态导入 [英] dynamic imports in Vuejs

问题描述

我正在为我的应用程序使用服务器端渲染的vue(未使用vue-cli引导).而且我的应用程序当前正在使用index.js文件中的Vue.component()在全局注册所有vue组件，该文件已加载到服务器的base.html中.

I am using server-side rendered vue for my application (not bootstrapped using vue-cli). And my application currently registers all the vue components globally using Vue.component() in the index.js file which is loaded in the base.html of my server.

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

I need to perform code-splitting, in order to load only the required components as per the url path and to do that I am using the dynamic import syntax for loading the components.

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

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

I get the error below (currently loading the components on http://localhost:8000/dashboard/) it tries to search for the chunk in /dashboard/<chunk.js> like this :

获取http://localhost:8000/dashboard/component-a.tmp2hr7_bhp.js net :: ERR_ABORTED 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)

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

I tested this using a basic vue-cli bootstapped app without any custom webpack config, it worked just fine. not sure why this causes a problem here also tried the babel plugin-syntax-dynamic-import but didn't work.

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

Not sure, is there a path problem (as it appends the file chuck name to the url path), since, webpack is not able to find the chunk js file ... thanks for the help!

推荐答案

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

The filename in your webpack.config.js's output property's file name is created dynamically which will have [name].[chunkhash].js you can change it to [name].js as mentioned below.

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

我认为这将解决问题.

这篇关于Vuejs中的动态导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！