Vite -更改资产的输出目录
Vite -更改资产的输出目录
提问于 2022-02-18 22:27:09
默认情况下，Vite在dist下的源目录中生成文件。
my-app/
├─ node_modules/
├─ dist/
│ ├─ assets/
| | | index.js
| | | index.css
│ ├─ index.html
├─ index.html
├─ main.js
├─ style.scss
├─ package.json我需要为js和css文件在assets下创建一个不同的文件夹。换句话说，我需要将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/, ""),
},
},
},
});如何做到这一点？
回答 3
Stack Overflow用户
回答已采纳
发布于 2022-02-20 01:10:11
输出文件名在使用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',
},
},
},
});Stack Overflow用户
发布于 2022-03-25 09:04:19
谢谢tony19，这个工作也很正常，但是我有构建错误:vite: build assetInfo.name.split(.).at不是一个函数
我简单的改变
assetInfo.name.split('.').at(1);至
assetInfo.name.split('.')[1];Stack Overflow用户
发布于 2022-04-27 06:30:32
如果在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",
},
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71180561
复制相关文章
相似问题
腾讯云开发者
