Vite - 更改资产的输出目录答案

【问题标题】：Vite - change ouput directory of assetsVite - 更改资产的输出目录
【发布时间】：2022-06-22 14:26:31
【问题描述】：

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文件管理器分别放在/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/, ""),
      },
    },
  },
});

怎么做？

【问题讨论】：

标签： javascript reactjs vite

【解决方案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

【讨论】：

【解决方案2】：

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

我简单的改变

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

到

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

【讨论】：

老实说，您应该使用 .pop() 从数组中删除最后一个元素，因为可能有多个点，然后这个硬编码的 [1] 索引将不起作用

【解决方案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",
      },
    }

【讨论】：