如何使用 vite build 设置脚本的自定义输出名称

Question

我不想从 vite build 获取像 index.abc123.js 这样的默认输出 js 文件，而是想告诉它如何命名输出文件。 但我不知道该怎么做。 这是我当前的 vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [vue()],
    server: {
        watch: {
            usePolling: true
        }
    },
    build: {
        emptyOutDir: true,      
        outDir: '../public', 
        assetsDir: './dist', 
    }
})

更新：花了相当多的时间来弄清楚什么适合我们的文件夹结构，但我终于找到了如何做我正在寻找的事情。 这是我们最终的 vite.config.js 和 packages.json 希望对其他人有帮助。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(({ command, mode }) => ({
    plugins: [vue()],
    server: {
        watch: {
            usePolling: true
        }
    },
    build: {
        emptyOutDir: true,
        outDir: '../public',
        minify: mode === 'development' ? false : 'terser',
        rollupOptions: {
            output: {
                assetFileNames: 'client/rsc/[ext]/[name][extname]',
                chunkFileNames: 'client/rsc/[chunks]/[name].[hash].js',
                entryFileNames: 'client/rsc/js/client.js'
            }
        }
    }
}));

packages.json

{
  "name": "webpp",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build --base=/public/",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.41"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.2.0",
    "vite": "^3.2.0"
  }
}

Answer 1

要实现此目的，您需要对两个文件进行更改：

• vite.config.ts

  |

  js

• package.json

vite.config.ts （文件） :

const isP = process.env.NODE_ENV === 'production';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    {
      name: 'rus-dist-cleanup',
      closeBundle: isP
        ? async () => {
            // Remove hash from assets
            const fs = require('fs');
            const path = require('path');
            const dir = path.resolve(__dirname, 'dist/assets');
            const files = fs.readdirSync(dir);
            files.forEach((file: string) => {
              // Remove hash from file name
              const newFile = file.replace(/-[a-z0-9]{8}\./, '.');
              fs.renameSync(path.resolve(dir, file), path.resolve(dir, newFile));
            });
          }
        : undefined,
    },
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  ...(isP
    ? {}
    : {
        build: {
          outDir: 'dist',
          emptyOutDir: true,
          minify: true,
          watch: {
            include: 'src/**',
            exclude: 'node_modules/**, .git/**, dist/**, .vscode/**',
          },
          assetsDir: 'assets',
          cssCodeSplit: false,
          sourcemap: false,
          ssr: false,
          rollupOptions: {
            treeshake: true,
            output: {
              entryFileNames: `assets/index.js`,
              chunkFileNames: `assets/index-chunk.js`,
              assetFileNames: `assets/[name].[ext]`,
            },
          },
        },
      }),
});

package.json（文件）：

"scripts": {
    "w": "vite build --watch",
    "dev": "vite",
    "build": "prettier --write src/ && run-p type-check build-only && ./move_dist.sh",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/",
},

yarn w

或

npm run w

启动构建监视过程。