react项目和静态页面一起部署，应该如何实现？

Question

我们有个react项目，还有一个同项目的静态首页。

最后打包后的目录结构大致是

dist
    - index.html // 静态页面
    - react // react项目打包页面
    - - index.html
    - - umi.js
    - - layout.js
    - - layout.css

希望访问http://localhost:8081的时候访问index.html，访问http://localhost:8081/react之后的都访问react中的页面。

umi配置文件

export default {
  npmClient: 'pnpm',
  outputPath: 'dist/react',
  copy: [
    {
      from: 'web', // web文件夹里就是index.html 静态页面
      to: 'dist',
    },
  ],
};

dist放到nginx上，配置nginx

server {
        listen       8081;
        server_name  localhost;

        location / {
            root   /demo/dist;
            index  index.html index.htm;
        }
    }

部署后，访问http://localhost:8081可以访问静态首页，但是访问http://localhost:8081/react的时候，react/index.html和react/umi.js都可以正确访问，但是layout.js和layout.css没有访问，导致页面空白。

请问这种需求如何解决？

Answer 1

配置一下 publicPath 就行了（和你配置的 outputPath 同级的属性），就是部署的二级目录，也就是 /react/ 或者 ./ 都可以。
你这个问题就是把 outputPath 和 publciPath 的作用记错/记混了，导致最后编译后的项目静态资源缺少了二级目录的路径。

这里是 UmiJS 的配置文档 👉 publicpath - 配置 | UmiJS

Answer 2

不知道 umi 是什么工具，不过如果是 vite 或者 webpack 的话，都需要配置 publicPath 为 react，才能部署项目到指定目录。