Vue3+Vite项目构建后预览及Apache部署空白页无报错问题

用Vite搭建的Vue3应用本地开发完全正常，但部署到Apache服务器后出现无报错的空白页面；执行npm run build后运行npm run preview也会出现同样的空白页面，没有任何报错，希望能正常显示应用视图。

dist目录下的index.html #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="./favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>aM</title>
    <script type="module" crossorigin src="./assets/index-8e9b77d6.js"></script>
    <link rel="modulepreload" crossorigin href="./assets/@vue-c5631f51.js">
    <link rel="modulepreload" crossorigin href="./assets/vue-router-cb554bea.js">
    <link rel="modulepreload" crossorigin href="./assets/pinia-24020fcf.js">
    <link rel="modulepreload" crossorigin href="./assets/luxon-1af9332f.js">
    <link rel="modulepreload" crossorigin href="./assets/axios-4a70c6fc.js">
    <link rel="modulepreload" crossorigin href="./assets/crypto-js-629e539e.js">
    <link rel="modulepreload" crossorigin href="./assets/izitoast-40803d10.js">
    <link rel="modulepreload" crossorigin href="./assets/vuetify-bb88969c.js">
    <link rel="modulepreload" crossorigin href="./assets/@intlify-771bffe6.js">
    <link rel="modulepreload" crossorigin href="./assets/vue-i18n-b6b11f81.js">
    <link rel="modulepreload" crossorigin href="./assets/vue3-easy-data-table-ba1e6059.js">
    <link rel="modulepreload" crossorigin href="./assets/hookable-e7fd869b.js">
    <link rel="modulepreload" crossorigin href="./assets/@unhead-8e4406cf.js">
    <link rel="modulepreload" crossorigin href="./assets/unhead-c080450a.js">
    <link rel="modulepreload" crossorigin href="./assets/vue-country-flag-next-10f89852.js">
    <link rel="modulepreload" crossorigin href="./assets/@fortawesome-24306ca7.js">
    <link rel="modulepreload" crossorigin href="./assets/pinia-logger-5dea0034.js">
    <link rel="stylesheet" href="./assets/izitoast-276cc841.css">
    <link rel="stylesheet" href="./assets/vuetify-d07219f2.css">
    <link rel="stylesheet" href="./assets/vue3-easy-data-table-90b8d25d.css">
    <link rel="stylesheet" href="./assets/index-7552c403.css">
    <link rel="stylesheet" href="./assets/@mdi-dfac2f60.css">
  </head>
  <body>
    <div id="app"></div>
    
  </body>
</html>

vite.config.js配置 #

import { fileURLToPath, URL } from "node:url"

import { defineConfig, splitVendorChunkPlugin } from "vite"
import vue from "@vitejs/plugin-vue"

import inheritAttrs from "vite-plugin-vue-setup-inherit-attrs"
import removeConsole from "vite-plugin-remove-console"

export default defineConfig({
  plugins: [vue(), splitVendorChunkPlugin(), inheritAttrs(), removeConsole()],
  base: './',
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
    extensions: [".js", ".json", ".jsx", ".mjs", ".ts", ".tsx", ".vue"],
  },
  define: {
    __VUE_I18N_FULL_INSTALL__: true,
    __VUE_I18N_LEGACY_API__: false,
    __INTLIFY_PROD_DEVTOOLS__: false,
  },
  build: {
    chunkSizeWarningLimit: 1600,
    sourcemap: true,
    target: "esnext",
    minify: "esbuild",
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes("node_modules")) {
            return id.toString().split("node_modules/")[1].split("/")[0].toString()
          }
        },
      },
    },
  },
  server: {
    host: true,
    port: 80,
  },
})

根据你的代码和问题现象，以下是几个能解决空白页问题的方向：

• 检查路由模式：如果用了vue-router的history模式，部署到Apache需要配置重写规则，否则路由初始化可能失败导致空白页。可以先改成hash模式测试，或者在Apache配置文件中添加规则：

  <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
  </IfModule>
  

• 调整build.target配置：当前target: "esnext"可能导致部分环境不支持ESNext语法，JS无法执行。建议改成target: "modules"或target: "es2020"，重新打包测试。

• 修正资源加载路径：尝试把base: './'改成绝对路径，比如部署在根目录就设为base: '/'，子目录则设为对应路径（如base: '/your-app/'），重新打包验证。

• 排查第三方库兼容性：临时注释部分第三方库（如Vuetify、vue-i18n）的引入，逐步排查是否是某个库在生产环境初始化失败导致空白。

• 查看真实控制台错误：removeConsole插件可能隐藏了错误日志，临时注释该插件，重新打包后运行npm run preview，打开浏览器控制台查看具体报错信息。

内容的提问来源于stack exchange，提问作者Magned-devel