vite构建部署后页面打开空白如何解决

　　比如部署页面最终部署在 https://xxx.com/demo/ 下，就必须在vue-router 中配置以下代码，否则确实会打开白屏

import { createRouter, createWebHistory} from 'vue-router';​​​​​​​
export default createRouter({
    history: createWebHistory('/demo/'),//你的网站根目录地址
    routes,
});

 

// 1、首先在Vue router的index中加入base
import { createRouter, createWebHistory } from "vue-router";
import routes from "./routes";//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",
    assetsDir: "assets", //指定静态资源存放路径
    // assetsPublicPath:'',
    sourcemap: true, //是否构建source map 文件
    terserOptions: {
      // 生产环境移除console
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
// 完成这两步骤就大功告成