Vite+React+TS项目部署在AWS Ubuntu的Nginx服务器上，资源加载正常但页面空白（body为空）求助

Hey there! Let's figure out why your React + TS + Vite app is showing a blank page even though all resources seem to load correctly. I've gone through your configs and here are the most likely fixes to try:

1. 修正Vite的Base URL配置 #

Your current VITE_BASE_URL is set to "lionmiss-hub/", but Vite expects the base path to be an absolute URL starting with a slash. This might cause subtle issues with how React mounts or how assets are resolved under the hood.

Update your .env file:

VITE_BASE_URL="/lionmiss-hub/"

Then rebuild your app with npm run build and redeploy the dist folder to your server.

2. 调整Nginx配置以支持SPA路由 #

Right now your Nginx location /lionmiss-hub block only maps the directory, but it doesn't handle Single Page Application (SPA) routing logic. Even if you're not using React Router, Vite apps still need Nginx to redirect all sub-path requests to the root index.html of your app.

Modify your Nginx config like this:

location /lionmiss-hub {
  alias /projects/lionmiss/hub/dist;
  # Redirect all requests to index.html for SPA routing
  try_files $uri $uri/ /lionmiss-hub/index.html;
}

After making changes, reload Nginx to apply them:

sudo systemctl reload nginx

3. 检查React的挂载代码 #

Double-check your main.tsx (or entry file) to make sure it's targeting the correct element in your index.html. Your index.html should have a root element like:

<div id="root"></div>

And your entry file should have code like:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

If the root element ID doesn't match, React won't mount anything, leaving the body empty.

4. 检查浏览器控制台的错误 #

Even if resources load successfully, there might be a JavaScript error preventing React from mounting. Open your browser's DevTools (F12), go to the Console tab, and look for any errors (like missing modules, path issues, or runtime errors). These errors will give you direct clues about what's broken.

5. Verify your built files #

Check the index.html in your deployed dist folder. Make sure the script tags point to the correct paths (e.g., /lionmiss-hub/assets/index.[hash].js). If the paths are missing the /lionmiss-hub/ prefix, that means your base URL config wasn't applied correctly during the build.

Give these steps a try, and let me know if any of them resolve your blank page issue!

备注：内容来源于stack exchange，提问作者Kode Neko