I'm currently attempting to dynamically load Vue 3 components in an asynchronous manner. I have come across a function called
defineAsyncComponent
which is intended to be utilized as shown below:
const GameUI = defineAsyncComponent(()=>import(filePath));
app.component("GameUI", GameUI);
In this context, the filePath is exactly:
'./components/GameUI/GameUI.element.vue'When I run the application in this way, it results in the following error:
Uncaught (in promise) Error: Cannot find module './components/GameUI/GameUI.element.vue'
at eval (eval at ./src lazy recursive)
However... if I modify the filePath code to import the path as a string:
const GameUI = defineAsyncComponent(()=>import('./components/GameUI/GameUI.element.vue'));
The application functions correctly, as it successfully locates the component.
I prefer not to use hardcoded strings, as I have numerous components that I want to load asynchronously.
One of my primary objectives is to load the web application incrementally, loading components as needed rather than all at once during startup.
I discovered that if I add a comment like this:
const GameUI = defineAsyncComponent(()=>import(/* webpackChunkName: "GameUI" */ './components/GameUI/GameUI.element.vue'));
The JavaScript segment for the GameUI component should be separated into its own chunk.js file, however, I keep receiving everything in a few .js chunk files, which contradicts the asynchronous loading I am aiming for.
I am using vue-cli-service, and my vue.config.js is configured like this:
module.exports = {
productionSourceMap: false,
css: {
loaderOptions: {
sass: {
additionalData: process.env.NODE_ENV === 'production'
? '$baseURL:"/dist/";'
: '$baseURL:"/";'
}
}
},
publicPath: process.env.NODE_ENV === 'production'
? '/dist/'
: '/',
devServer: {
https: true,
port:"",
host:'website.com',
disableHostCheck: true,
cert: (fs.readFileSync('cert.pem')+""),
key: (fs.readFileSync('privkey.pem')+""),
ca: (fs.readFileSync('ca.pem')+""),
}
};
I have attempted various solutions I found online, but many were lacking in explanation. I am essentially following the same steps as some online articles I came across, yet I am unable to identify the issue on my end.
The main issues I am encountering are:
- Unable to load .vue files from variables, only direct strings.
- Unable to separate the code into different .js files for each asynchronously loaded component.