【vue3】vite.config.ts(js)打包部署后页面白屏

需求: 要求打包的文件可以部署在任意文件夹内（要求打包后为相对路径）

在vite.config.ts(js)中设置  base:'./' 

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({

  base:'./',  //加上这个可改为相对路径

  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },

  build: {
    chunkSizeWarningLimit: 15000
  },
})

然后把createWebHistory改为createWebHashHistory

此时页面就可以显示了 ，但是路径会有#。如果不想有#，就用history模式，那就需要服务器配置正确。

原因：

当在 Vite 中将 base 设置为 './' 时，使用 createWebHistory 可能会导致页面白屏的问题，而使用 createWebHashHistory 则可以正常显示页面。这种情况通常是由于服务器配置不正确导致的。

在使用 HTML5 history 模式时，需要确保服务器能正确地处理路由请求。具体来说，服务器需要配置将所有路由请求重定向到你的应用程序的入口文件，以确保在刷新页面或直接访问路由时能够正确加载应用程序。

如果您的服务器配置不正确，可能会导致页面白屏或路由无法正常工作。而使用 hash 模式则不需要特殊的服务器配置，因为 hash 模式的路由会被浏览器自动处理。

因此，如果您希望使用 HTML5 history 模式并将 base 设置为 './'，请确保您的服务器配置正确，能够正确处理路由请求。如果服务器配置存在问题，建议使用 hash 模式或者调整服务器配置以支持 HTML5 history 模式。