Vuejs 中的动态导入

Question

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.

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

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:

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

and this

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

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.

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!

Answer 1

I think its a path problem.

Try setting alias in your webpack config (this is what vue-cli uses by default):

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

now use @ in the component path like this. Vue.component('component-a', () => import(/* webpackChunkName: "component-a" */ '@/component-a.vue'))

Answer 2

This is correct assuming the component is in the same directory:

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

Answer 3

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',
  ...
},

I think this will solve the issue.