Vite(Vite-plugin-ssr)生成单独的资产,在相应的目录下构建bundels(每页MPA)

我正在使用vite-plugin-ssr在vite-react上构建一个MPA,目的是在开发和构建过程中生成html。 插件在很大程度上完成了生成html的工作,但我也需要在dist中使用它来保持文件的结构。

它现在的作用:

my-app/
├─ node_modules/
├─ dist/
│  ├─ client/
|  |    index.html
|  |    ├─ assets/
|  |    |    ├─ chunks
|  |    |    ├─ enties
|  |    |    ├─ static 
|  |    ├─ about
|  |    |    ├─ index.html
|  |    ├─ pageone
|  |    |    ├─ index.html
|  |    ├─ pagetwo
|  |    |    ├─ index.html
|  |    ├─ pagethree
|  |    |    ├─ index.html       
│  ├─ server
├─ pages/
|  |    ├─ about/
|  |    |    ├─ images
|  |    |    ├─ about.css
|  |    |    ├─ index.page.jsx
|  |    ├─ index
|  |    ├─ pageone
|  |    ├─ pagetwo
|  |    ├─ pagethree
├─ renderer
├─ server
├─ package.json
├─ vite.config.js

每个页面中的结构与about页面中的相同。

我希望它生成的内容:

my-app/
├─ node_modules/
├─ dist/
│  ├─ client/
|  |    index.html
|  |    ├─ shared/ (keep assets for the purpose of shared files)
|  |    |    ├─ fonts
|  |    |    ├─ css
|  |    |    ├─ js
|  |    ├─ about
|  |    |    ├─ images (inside images for this page ) 
|  |    |    ├─ css (inside about.css ) 
|  |    |    ├─ js (inside about.js ) 
|  |    |    ├─ index.html
|  |    ├─ pageone
|  |    |    ├─ images
|  |    |    ├─ css
|  |    |    ├─ js
|  |    |    ├─ index.html
|  |    ├─ pagetwo
|  |    |    ├─ images
|  |    |    ├─ css
|  |    |    ├─ js
|  |    |    ├─ index.html
|  |    ├─ pagethree
|  |    |    ├─ images
|  |    |    ├─ css
|  |    |    ├─ js
|  |    |    ├─ index.html       
│  ├─ server
├─ pages/
|  |    ├─ about/
|  |    |    ├─ images
|  |    |    ├─ about.css
|  |    |    ├─ index.page.jsx
|  |    ├─ index
|  |    ├─ pageone
|  |    ├─ pagetwo
|  |    ├─ pagethree
├─ renderer
├─ server
├─ package.json
├─ vite.config.js

这可能吗?或者也许我不应该使用ssr插件,但vite开箱即用的ssr会更适合这个目的吗?

我尝试在我的vite配置中为汇总选项执行以下操作:

 build: {
    assetsDir: 'shared',
    rollupOptions: {
      output: {
        assetFileNames: (assetInfo) => {
          let extType = assetInfo.name.split('.').at(-1);
          if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
            extType = 'img';
          }
          return `slideone/${extType}/[name]-[hash][extname]`;
        },
        chunkFileNames: 'slideone/js/[name]-[hash].js',
      },
    },
  }

但它将所有img css和js作为一堆移动到了slideone中(正如我硬编码的那样),并保存在共享文件夹的子文件夹条目中。。这是我走得最远的一次。

├─ dist/
│  ├─ client/
|  |    index.html
|  |    ├─ shared/
|  |    |    ├─ enties
|  |    ├─ about
|  |    |    ├─ images
|  |    |    ├─ css (inside all css ) 
|  |    |    ├─ js (inside all js ) 
|  |    |    ├─ index.html
|  |    ├─ pageone
|  |    |    ├─ images
|  |    |    ├─ css
|  |    |    ├─ js
|  |    |    ├─ index.html
|  |    ├─ pagetwo
|  |    |    ├─ images
|  |    |    ├─ css
|  |    |    ├─ js
|  |    |    ├─ index.html
|  |    ├─ pagethree
|  |    |    ├─ images
|  |    |    ├─ css
|  |    |    ├─ js
|  |    |    ├─ index.html