javascript Vite -更改资产的输出目录

zxlwwiss 于 2023-04-04 发布在 Java

关注(0)|答案(3)|浏览(550)

默认情况下，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/, ""),
      },
    },
  },
});

如何做到这一点？

JavaScript

来源：https://stackoverflow.com/questions/71180561/vite-change-ouput-directory-of-assets

3条答案

按热度按时间

clj7thdc1#

输出文件名在Rollup中配置为build.rollupOptions：
1.设置output.assetFileNames以配置资源文件名（用于媒体文件和样式表）。
1.设置output.chunkFileNames以配置供应商块文件名。
1.设置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

赞(0）回复(0）举报 2023-04-04

kx7yvsdv2#

如果你在你的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",
      },
    }

赞(0）回复(0）举报 2023-04-04

w6lpcovy3#

感谢tony 19，这工作正常，以及，但我有构建错误：[vite：build-html] assetInfo.name.split（...）.at不是函数
我简单的改变

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

到

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

赞(0）回复(0）举报 2023-04-04

我来回答

javascript Vite -更改资产的输出目录

3条答案

相关问题

热门标签

最新问答