Solve the problem that index.html does not display under the dist folder after vue3 is packaged

1. When I use vue3 scaffolding to generate a project, after npm run build is successfully packaged, the result shows a blank page. Press f12 to check and report an error, as shown in the figure:

It is said that the path of my js file and css file cannot be found. I searched online and found that it is because vue-cli3 is much simpler. There is no configuration file. The default public path is '/', so I need to create a configuration file to change the path. The configuration file can only be created in the root directory of the project (the same level as the src file), and the name of the file can only be vue.

module.exports = {
    publicPath: './'
}

(There is also a method on the Internet to search assetsPublicPath globally and change assetsPublicPath:'./', but because there is no configuration file at all, it cannot be found at all. Creating vue.config.js by yourself and adding assetsPublicPath is also unsuccessful.)

2. After repackaging, I found that there was a new problem, saying that the file was not found:

Press F12 to view the error, and found that it is a problem of routing jump

 I searched on the Internet again, and the solution is to change the routing mode, change mode: 'history' to mode: 'hash', I changed it, but to no avail, and found that the way to export the route is different, and then I consulted my colleagues for help, and found that the routing configuration methods of vue2 and vue3 are also different. Refer to the routing document of vue3: Different History modes | Vue Router (vuejs.org) https://router.vuejs.org/guide/essent ials/history - mode.html

It should be changed like this in index.js under the router folder:

const router = createRouter({
  //改这个方法createWebHashHistory(是hash模式)
  history: createWebHashHistory(),//而createWebHistory()方法则为history模式
  routes
})

But remember to import it first when you use it:

import { createRouter, createWebHistory } from 'vue-router'