Vite

Question

默认Vite在dist.

下的源目录下生成文件

my-app/
├─ node_modules/
├─ dist/
│  ├─ assets/
|  |    | index.js
|  |    | index.css        
│  ├─ index.html
├─ index.html
├─ main.js
├─ style.scss
├─ package.json

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

my-app/
├─ node_modules/
├─ dist/
│  ├─ assets/
|  |    |-js/
|  |    |   index.js
|  |    |-css/
|  |    |  index.css

这是我的配置文件。

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgrPlugin from "vite-plugin-svgr";

// https://vitejs.dev/config/
export default defineConfig({
  base: "./",
  plugins: [react(), svgrPlugin()],
  server: {
    open: true,
    proxy: {
      "/base": {
        target: "http://localhost:19000",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/base/, ""),
      },
    },
  },
});

如何操作？

Answer 1

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

设置 output.assetFileNames 以配置资产文件名（用于媒体文件和样式表）。
设置 output.chunkFileNames 以配置供应商区块文件名。
设置 output.entryFileNames 以配置 index.js 文件名。

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        1️⃣
        assetFileNames: (assetInfo) => {
          let extType = assetInfo.name.split('.').at(1);
          if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
            extType = 'img';
          }
          return `assets/${extType}/[name]-[hash][extname]`;
        },
        2️⃣
        chunkFileNames: 'assets/js/[name]-[hash].js',
        3️⃣
        entryFileNames: 'assets/js/[name]-[hash].js',
      },
    },
  },
});

demo

Answer 2

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

我简单改

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

至

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

Answer 3

如果您在 css 文件中使用了 @font-face，它会堆积起来。因此，您可能需要将字体放在与 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",
      },
    }

Vite - 更改资产的输出目录

Vite - change ouput directory of assets

javascript

reactjs