Vite构建React应用如何部署到网站非根目录子路径

核心配置：修改Vite构建base参数 #

Vite默认以站点根路径为基准生成资源引用，只需要在项目根目录的vite.config.js/vite.config.ts中配置base字段即可适配子目录部署，分两种场景选择：

• 固定部署到已知子路径（比如示例中的/myapps/myviteapp/）
  直接填写完整的子路径即可，注意路径开头和结尾都要保留斜杠：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    base: '/myapps/myviteapp/'
  })
  

• 需要适配任意层级子目录部署
  直接将base设置为相对路径./，构建后所有资源引用都会使用相对路径，无论把构建产物放到哪个子目录下，都能正确加载同目录下的静态资源：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    base: './'
  })
  

配置完成后重新执行npm run build，检查生成的dist目录下的index.html，资源引用会变成配置的格式，比如用相对路径配置后，引用格式如下，不会再从站点根路径找资源：

<script type="module" crossorigin src="./assets/index.27ec30df.js"></script>
<link rel="stylesheet" href="./assets/index.6d428de0.css">

此时把dist目录下的所有文件直接复制到Tomcat对应的部署路径/var/lib/tomcat9/webapps/myapps/myviteapp下，静态资源就可以正常加载了。

注意：使用base: './'配置时，代码中不要写以/开头的绝对路径资源引用，否则依然会从站点根路径查找资源，建议通过import方式引入资源，或者使用相对路径引用。

额外适配项 #

前端路由适配 #

如果React应用使用react-router-dom做路由，需要同步配置路由的基准路径，避免路由跳转异常：

• 固定子路径部署场景，直接给路由组件设置对应basename即可：

  import { BrowserRouter } from 'react-router-dom'
  
  ReactDOM.createRoot(document.getElementById('root')).render(
    <BrowserRouter basename="/myapps/myviteapp">
      <App />
    </BrowserRouter>
  )
  

• 任意子目录部署场景，可以通过当前访问路径自动计算basename：

  import { BrowserRouter } from 'react-router-dom'
  
  // 自动取当前路径的目录部分作为路由基准
  const routerBase = window.location.pathname.slice(0, window.location.pathname.lastIndexOf('/'))
  
  ReactDOM.createRoot(document.getElementById('root')).render(
    <BrowserRouter basename={routerBase}>
      <App />
    </BrowserRouter>
  )
  

如果使用HashRouter则不需要额外配置basename，哈希路由天然适配任意子目录部署。

Tomcat侧刷新404处理 #

如果使用BrowserRouter，在子路由路径下刷新页面会触发Tomcat的404错误，需要在应用部署目录下新建WEB-INF/web.xml文件，配置404请求转发到入口index.html：
文件完整路径为/var/lib/tomcat9/webapps/myapps/myviteapp/WEB-INF/web.xml，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
  version="4.0"
  metadata-complete="true">
  <error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
  </error-page>
</web-app>

配置完成后重启Tomcat即可生效。

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