Vite - 更改资产的输出目录

Question

Vite默认在源码目录下生成文件dist。

\n

my-app/\n\xe2\x94\x9c\xe2\x94\x80 node_modules/\n\xe2\x94\x9c\xe2\x94\x80 dist/\n\xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 assets/\n|  |    | index.js\n|  |    | index.css        \n\xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 index.html\n\xe2\x94\x9c\xe2\x94\x80 index.html\n\xe2\x94\x9c\xe2\x94\x80 main.js\n\xe2\x94\x9c\xe2\x94\x80 style.scss\n\xe2\x94\x9c\xe2\x94\x80 package.json\n

\n

我需要为js和css下的文件创建一个不同的文件夹assets。换句话说，我需要分别将js和cssfiler 放在/assets/js和/assets/css文件夹下。

\n

my-app/\n\xe2\x94\x9c\xe2\x94\x80 node_modules/\n\xe2\x94\x9c\xe2\x94\x80 dist/\n\xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 assets/\n|  |    |-js/\n|  |    |   index.js\n|  |    |-css/\n|  |    |  index.css  \n

\n

这是我的配置文件。

\n

import { defineConfig } from "vite";\nimport react from "@vitejs/plugin-react";\nimport svgrPlugin from "vite-plugin-svgr";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  base: "./",\n  plugins: [react(), svgrPlugin()],\n  server: {\n    open: true,\n    proxy: {\n      "/base": {\n        target: "http://localhost:19000",\n        changeOrigin: true,\n        rewrite: (path) => path.replace(/^\\/base/, ""),\n      },\n    },\n  },\n});\n\n

\n

怎么做呢？

\n

Answer 1

输出文件名在 Rollup 中配置为build.rollupOptions：

\n

\n

1. 设置output.assetFileNames以配置资产文件名（对于媒体文件和样式表）。

   \n
\n

2. 设置output.chunkFileNames以配置供应商块文件名。

   \n
\n

3. 设置output.entryFileNames配置index.js文件名。

   \n
\n

\n

// vite.config.js\nimport { defineConfig } from \'vite\';\nimport react from \'@vitejs/plugin-react\';\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [react()],\n  build: {\n    rollupOptions: {\n      output: {\n        1\xef\xb8\x8f\xe2\x83\xa3\n        assetFileNames: (assetInfo) => {\n          let extType = assetInfo.name.split(\'.\').at(1);\n          if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {\n            extType = \'img\';\n          }\n          return `assets/${extType}/[name]-[hash][extname]`;\n        },\n        2\xef\xb8\x8f\xe2\x83\xa3\n        chunkFileNames: \'assets/js/[name]-[hash].js\',\n        3\xef\xb8\x8f\xe2\x83\xa3\n        entryFileNames: \'assets/js/[name]-[hash].js\',\n      },\n    },\n  },\n});\n

\n

演示

\n

Answer 2

如果你@font-face在你的 css 文件中使用它，它就会聚集起来。您可能需要将字体与 css 文件放在同一文件夹中。

我用过woff和woff2字体

    rollupOptions: {
      output: {
        assetFileNames: (assetInfo) => {
          var info = assetInfo.name.split(".");
          var extType = info[info.length - 1];
          if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
            extType = "img";
          } else if (/woff|woff2/.test(extType)) {
            extType = "css";
          }
          return `static/${extType}/[name]-[hash][extname]`;
        },
        chunkFileNames: "static/js/[name]-[hash].js",
        entryFileNames: "static/js/[name]-[hash].js",
      },
    }

Answer 3

谢谢tony19，这也能正常工作，但我有构建错误： [vite:build-html] assetInfo.name.split(...).at 不是一个函数

我简单的改变

assetInfo.name.split('.').at(1);

到

assetInfo.name.split('.')[1];