如何将Vite创建的React应用部署到WordPress站点并解决资源加载错误？

1. 调整Vite基础路径配置 #

你用Vite创建的项目出现资源路径错误，核心原因是构建时的基础路径没匹配服务器部署路径。在项目根目录的vite.config.js（或vite.config.ts）里添加base配置项：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/dist/' // 对应服务器上dist文件夹的URL路径前缀
})

2. 重新构建并上传文件 #

执行npm run build重新生成适配新路径的dist文件夹，把完整的dist文件夹上传到服务器的public_html目录下，确保服务器端路径为public_html/dist/。

3. 验证访问地址 #

访问站点时用https://你的域名/dist/作为入口URL，此时浏览器会正确请求/dist/assets/开头的资源文件，页面就能正常渲染了。

可选方案（根路径部署） #

如果想让React项目用域名根路径访问，但服务器已部署WordPress，可尝试：

• 将dist文件夹内的所有文件（不是dist文件夹本身）上传到public_html下的独立子目录（比如react-app），同时修改vite.config.js的base为'/react-app/'
• 若要根路径映射，可通过WordPress的.htaccess配置路由规则，但这个操作对新手有一定复杂度，优先推荐子路径部署方式。

内容的提问来源于stack exchange，提问作者Jonathan Hutchinson