在Plesk上部署Vite+React应用：缺失「应用启动文件」及刷新页面出现404问题

算力阿峰

2026-4-27

针对你的Vite React SPA部署到Plesk的问题，我来一步步帮你理清：

1. 是否需要启用Plesk Node.js支持？

对于纯静态的Vite React SPA来说，直接部署dist文件夹作为静态资源是最优解，完全不需要启用Node.js扩展。因为npm run build生成的dist目录里已经包含了所有编译后的静态HTML、CSS、JS文件，只需要Web服务器（Apache/Nginx）直接托管这些文件就行，不需要Node.js运行时，这样更轻量、高效。

只有当你需要运行Vite的开发服务器（vite dev）或者预览服务器（vite preview），或者需要额外的Node.js后端逻辑时，才需要启用Node.js扩展。你的场景里没有自定义后端，所以静态部署足够。

2. 静态部署时处理react-router-dom的History Fallback

SPA的客户端路由在刷新时出现404，是因为Web服务器会尝试寻找对应路径的物理文件（比如/contact），但实际上这些路径都是由React Router在浏览器端处理的，所以需要配置服务器把所有非静态文件的请求都转发到index.html。

根据你Plesk服务器使用的Web服务器类型，配置方式不同：

如果你用Apache：

在dist目录下创建一个.htaccess文件，添加以下内容：

RewriteEngine On
# 如果请求的文件或目录不存在，转发到index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [L]

然后在Plesk中把该域名的文档根目录设置为dist文件夹即可。

如果你用Nginx：

在Plesk中进入该域名的「Apache & Nginx Settings」，找到「Additional Nginx directives」区域，添加以下配置：

location / {
    try_files $uri $uri/ /index.html;
}

保存后，Nginx就会把所有无法匹配到静态文件的请求都导向index.html，解决刷新404的问题。

3. 若要使用Node.js扩展，需要编写小型服务器脚本吗？

是的，必须要有一个启动脚本让Plesk的Node.js扩展来运行。因为Vite的preview只是开发预览用的，不适合生产环境。你可以用两种简单的方式实现：

方式一：使用`serve`包快速搭建

安装serve作为生产依赖：

npm install serve --save-prod

在package.json里添加start脚本：

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "lint": "eslint .",
  "preview": "vite preview",
  "start": "serve dist -s"
}

这里的-s参数就是启用单页应用的fallback模式，自动处理路由刷新问题。
3. 在Plesk的Node.js扩展配置中，把「Application Startup File」设置为node_modules/serve/bin/serve.js，然后设置「Document Root」为dist，最后启动Node.js应用即可。

方式二：自定义简单的Express服务器

如果你想更灵活，可以自己写一个小的Express服务器：

安装express作为生产依赖：

npm install express --save-prod

在项目根目录创建server.js文件：

import express from 'express';
import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const app = express();
const port = process.env.PORT || 3000;

// 托管dist目录下的静态资源
app.use(express.static(path.join(__dirname, 'dist')));

// 处理所有路由，返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

在package.json里更新start脚本：

"start": "node server.js"

在Plesk的Node.js扩展中，把「Application Startup File」设置为server.js，然后启动应用即可。

不过还是要强调，这种方式比静态部署多了一层Node.js运行时，对于纯SPA来说没必要，静态部署更简单高效。

内容的提问来源于stack exchange，提问作者Luca Cavioni