vite.config.ts plugin
时间: 2024-12-31 09:36:31 浏览: 11
### Vite 插件配置
在 `vite.config.ts` 文件中配置插件是通过导出一个由 `defineConfig` 创建的对象来完成的。此对象包含一个名为 `plugins` 的数组,用于定义项目所需的各个插件。
```typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue() // Vue 插件实例化并加入到插件列表中
]
})
```
上述代码展示了最基本的插件配置方式[^2]。对于更复杂的场景,比如配置别名、处理环境变量或是支持特定资源类型的加载(如 SVG 图标),则可能需要引入额外的插件或工具函数,并将其添加至 `plugins` 数组内。
例如,在配置 SCSS 变量全局导入时,除了按照说明创建相应的样式文件外,还需要利用类似 `sass` 或者其他预处理器的支持库作为插件来进行设置:
```typescript
// 假设已经安装了 @fullhuman/postcss-purgecss 和 sass 等依赖项
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import sass from 'sass'
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/styles/variable.scss";`
}
}
},
resolve: {
alias: [{ find: '@/styles', replacement: path.resolve(__dirname, 'src/styles') }]
},
plugins: [
vue(),
// 如果有更多插件可以继续在这里添加
]
})
```
这段代码不仅实现了对 `$变量` 的支持,还示范了如何通过修改 `resolve.alias` 来简化路径引用以及怎样自定义 CSS 预处理器选项以实现全局样式的自动注入[^1]。
阅读全文