base
开发或生产环境服务的公共基础路径。合法的路径3种写法
- 绝对URL
/test/ - 完整的URL
https://test.com/ - 空字符串或者
./（用于嵌入形式的开发）
mode 模式
指定当前应用的环境，
默认： 'development' 用于开发，'production' 用于构建
在配置中指明将会把 serve 和 build 时的模式 都 覆盖掉。也可以通过命令行 --mode 选项来重写。
mode:'test'
plugins 插件注册
类型： (Plugin | Plugin[] | Promise<Plugin | Plugin[]>)[]
项目中用到的插件注册。
更多关于插件文档： https://cn.vitejs.dev/guide/api-plugin.html
plugins: [vue()],
resolve
resolve.alias 别名配置
resolve.alias是Vite中用于配置别名的选项，它可以帮助我们在代码中使用简短的路径来引用模块。
例如，我们可以将import '../../../components/Button'这样冗长的路径改为import '@components/Button'。
// 配置别名 resolve: { alias: { '@': path.resolve(__dirname, 'src'), '@components': path.resolve(__dirname, 'src/components') } },
使用别名
<img src="@/assets/33.gif" alt=""> import HelloWorld from '@components/HelloWorld.vue'
resolve.dedupe 去重依赖项，减小打包后的文件体积
resolve.dedupe是Vite中用于去重依赖项的选项，它可以帮助我们减小打包后的文件体积。在Vite中，如果多个模块都依赖同一个库，那么这个库就会被重复打包进每个模块中，导致最终的打包文件体积变大。而使用resolve.dedupe选项可以让Vite自动去重这些依赖项，只打包一份库代码，从而减小打包后的文件体积。
以下是如何在Vite中使用resolve.dedupe选项：
- 在Vite配置文件（通常是vite.config.js）中添加resolve.dedupe选项：
// vite.config.js module.exports = { resolve: { dedupe: ['lodash'] } }
上面的示例中，我们将lodash库添加到了resolve.dedupe选项中，表示Vite在打包时会自动去重所有依赖lodash的模块。
- 在代码中正常引用依赖项即可，无需额外操作。
注意，resolve.dedupe选项只能去重ESM模块，对于CommonJS模块不起作用。此外，由于去重需要进行静态分析，因此可能会影响构建速度。因此，建议仅在必要时使用resolve.dedupe选项。
resolve.mainFields 用于指定模块入口文件的选项,帮助我们更精确地控制模块的解析过程
package.json 中，在解析包的入口点时尝试的字段列表。注意：这比从 exports 字段解析的情景导出优先级低：如果一个入口点从 exports 成功解析，resolve.mainFields 将被忽略。
resolve.extensions 配置导入文件需要省去的扩展名
导入时想要省略的扩展名列表。注意，不 建议忽略自定义导入类型的扩展名（例如：.vue），因为它会影响 IDE 和类型支持。
- 默认： ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']
css
css.preprocessorOptions 用于配置 CSS 预处理器的选项 [例如：导入样式变量文件]
css.preprocessorOptions 是 Vite 中用于配置 CSS 预处理器的选项。通过该选项，可以指定使用哪种 CSS 预处理器，并设置相应的预处理器选项。
在 Vite 中支持以下几种 CSS 预处理器：
- Sass/SCSS
- Less
- styl/stylus - 仅支持 define，可以作为对象传递。
以 Sass/SCSS 为例，要使用 Sass/SCSS 预处理器，需要安装 sass 或 node-sass 模块，并在 Vite 的配置文件中进行如下配置：
// vite.config.js export default { css: { preprocessorOptions: { scss: { // 在这里设置 Sass 的选项 } } } }
其中，scss 表示使用 Sass/SCSS 预处理器，可以根据需要改为 less 或 stylus。
在 scss 对象中，可以设置 Sass 的选项，例如：
// vite.config.js export default { css: { preprocessorOptions: { scss: { additionalData: ` @import "@/styles/variables.scss"; @import "@/styles/mixins.scss"; ` } } } }
上面的配置中，additionalData 选项用于添加额外的 Sass 代码，这里添加了两个 @import 语句，用于导入变量和混合宏定义。
除了 scss 选项外，还可以设置 less 和 stylus 选项，分别对应 Less 和 Stylus 预处理器的选项。
通过 css.preprocessorOptions 配置选项，可以方便地使用各种 CSS 预处理器，并设置相应的选项。
