我不想从 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"
}
}
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