vue-cli4 vue3 build后白屏/无法使用路由的解决方法

build后的index.html是空白页面

使用vue-cli4脚手架工具后，vue项目结构发生了变化，许多以前的设置也改变了，最近在npm run build一个项目之后发现打开html是空白，点开控制台发现很多资源找不到。只需要改变vue.config.js文件中的publicPath即可，如图所示（直接改成 ./ 也可以）

打开页面无法使用路由

还是那个老问题，默认的路由模式是history模式，以前只需要注释掉路由配置文件中的mode: 'history'即可，现在倒好，路由长这个样子

添加一行mode: hash也无济于事，其实只是vue3中改变了路由创建模式，只需要修改import中的路由历史构建函数，选用hash模式即可

import {createRouter, createWebHashHistory} from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    }
]

const router = createRouter({
    history: createWebHashHistory(process.env.BASE_URL),
    routes
})

export default router

之后运行npm run build，在dist文件中查看生成页面，打开就可以正常运行了