vite.config.js 打包配置路径
时间: 2025-01-09 15:41:41 浏览: 118
### Vite 配置文件中的构建配置路径设置
Vite 的 `vite.config.js` 文件用于定义项目的各种配置选项。对于打包配置路径,主要通过 `build` 字段来设定输出目录和其他相关参数[^1]。
#### 基本结构
以下是 `vite.config.js` 中与构建有关的部分基本结构:
```javascript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
build: {
outDir: './dist', // 输出目录,默认为 dist
assetsDir: 'assets', // 资源文件夹名,默认为 assets
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
nested: resolve(__dirname, 'nested/index.html')
},
output: {
entryFileNames: `[name].js`,
chunkFileNames: `[name].js`,
assetFileNames: `[name].[ext]`
}
}
}
})
```
此代码片段展示了如何自定义输出路径以及其他一些重要的属性。特别是 `outDir` 和 `rollupOptions.output.entryFileNames` 这些字段可以用来控制最终打包后的文件位置和命名规则。
#### 自定义入口点
如果项目中有多个页面,则可以通过修改 `rollupOptions.input` 来指定不同的 HTML 文件作为各个页面的入口点。这使得能够更灵活地管理多页应用(MPA) 或单页应用(SPA)。
#### 使用环境变量
为了使配置更加动态化,在某些情况下可能希望基于不同环境下调整这些路径。这时可以在 `.env` 文件中定义相应的环境变量,并利用它们来自动生成合适的路径值。
阅读全文
相关推荐


















