Vite+Vue3.0+Vue-Router4.0 采用history 页面刷新白屏问题处理（不用在nginx再进行配置）

项目场景：

Vite+Vue3.0+Vue-Router4.0 采用history 页面刷新白屏问题处理

---

问题描述：

最近使用Vue3.0 开发新项目，开始采用hash模式，但是不符合公司对url要求，于是改成history，但是刷新之后页面白屏。找了很多都说是要再nginx上修改配置，最后没有修改nginx配置，实现history模式导航

---

解决方案：

• 首先在Vue router的index中加入base，

import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
} from "vue-router";
import routes from "./routes";
import Cookies from "js-cookie";
//base 直接加在 createWebHistory 中
const routerHistory = createWebHistory('/h5/');
const router = createRouter({
  history: routerHistory,
  routes,
});

• 2.在vite.config.js 中设置 base，以及build之后的文件目录 （没有要求可以不用修改）

 base: "/h5/", // 类似publicPath，'./'避免打包访问后空白页面，要加上，不然线上也访问不了
 build: {
    chunkSizeWarningLimit: 1000,
    outDir: "dist",
    // 9月更新
    assetsDir: "assets", //指定静态资源存放路径
    // assetsPublicPath:'',
    sourcemap: true, //是否构建source map 文件
    terserOptions: {
      // 生产环境移除console
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },

完成这两步骤就大功告成。