[2022] How to use subdirectories for hosting in Vue CLI’s Router (for Blank page problem)

<Problem>

With the default configuration, the following files are generated in the dist directory when you run the npm run build command

• index.html
• css directory
• js directory

However, if this dist directory is deployed directly to a hosting environment such as Firebase, a blank page will be displayed as shown here.