江苏龙网

  1. 主页 > 生活百科 > >

Vite 配置篇：日常开发掌握这些配置就够了！

Vite

不知道有没有这样的兄弟，学习 Vite 的时候，官网上各种配置看的是眼花缭乱 。不知道哪些需要掌握，哪些只用简单了解一下 。为了提高大家的效率，我把项目中常用的配置梳理了一下分享给大家，希望对你上手 Vite 有所帮助 。话不多说，开干！
css.preprocessorOptions传递给 CSS 预处理器的配置选项，这些配置会传递到预处理器的执行参数中去 。例如，在 scss 中定义一个全局变量：
// vite.config.jsimport { defineConfig } from 'vite' // 使用 defineConfig 工具函数获取类型提示：export default defineConfig({css: {preprocessorOptions: {scss: {additionalData: `$injectedColor: orange;` // 全局变量}}}})我们也可以定义一个全局变量文件，然后再引入这个文件：
// src/assets/styles/variables.scss$injectedColor: orange;$injectedFontSize: 16px;// vite.config.jsimport { defineConfig } from 'vite'export default defineConfig({css: {preprocessorOptions: {scss: {additionalData: `@import '/src/assets/styles/variables.scss';` // 引入全局变量文件}}}})这样在 .scss 文件或 .vue 文件中就可以使用这些变量了 。
css.postcssPostCSS 也是用来处理 CSS 的，只不过它更像是一个工具箱，可以添加各种插件来处理 CSS。像浏览器样式兼容问题、浏览器适配等，都可以通过 PostCSS 来解决 。
Vite 对 PostCSS 有良好的支持，我们只需要安装相应的插件就可以了 。如移动端使用 postcss-px-to-viewport 对不同设备进行布局适配：
npm install postcss-px-to-viewport -D// vite.config.jsimport { defineConfig } from 'vite'import postcssPxToViewport from 'postcss-px-to-viewport'export default defineConfig({css: {postcss: {plugins: [// viewport 布局适配postcssPxToViewport({viewportWidth: 375})]}}})这样我们书写的 px 单位就会转为 vw 或 vh ，很轻松地解决了适配问题 。
resolve.alias定义路径别名也是我们常用的一个功能，我们通常会给 scr 定义一个路径别名：
// vite.config.jsimport { defineConfig } from 'vite'import path from 'path'export default defineConfig({resolve: {alias: {'@': path.resolve(__dirname, './src') // 路径别名}}})我们也可以使用插件，来自动给 src 和 src 下所有的文件夹定义路径别名：
// vite.config.jsimport { defineConfig } from 'vite'import { ViteAliases } from './node_modules/vite-aliases' // 通过名称引入会报错，可能是插件问题export default defineConfig({plugins: [ViteAliases()]})相应的路径别名如下：
src -> @assets -> @assetscomponents -> @componentsrouter -> @routerstores -> @storesviews -> @views...resolve.extensions导入时想要省略的扩展名列表 。默认值为 ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']  。
// vite.config.jsimport { defineConfig } from 'vite'import path from 'path'export default defineConfig({resolve: {extensions: ['.js', '.ts', '.json'] // 导入时想要省略的扩展名列表}})注意：不建议忽略自定义导入类型的扩展名（例如：.vue），因为它会影响 IDE 和类型支持 。
optimizeDeps.force是否开启强制依赖预构建 。node_modules 中的依赖模块构建过一次就会缓存在 node_modules/.vite/deps 文件夹下，下一次会直接使用缓存的文件 。而有时候我们想要修改依赖模块的代码，做一些测试或者打个补丁，这时候就要用到强制依赖预构建 。
// vite.config.jsimport { defineConfig } from 'vite'export default defineConfig({optimizeDeps: {force: true // 强制进行依赖预构建},})除了这个方法，我们还可以通过删除 .vite 文件夹或运行 npx vite --force 来强制进行依赖预构建 。
server.host指定服务器监听哪个 IP 地址 。默认值为 localhost ，只会监听本地的 127.0.0.1  。当我们开发移动端项目时，需要在手机浏览器上访问当前项目 。这时候可以将 host 设置为 true 或 0.0.0.0 ，这样服务器就会监听所有地址，包括局域网和公网地址 。
// vite.config.jsimport { defineConfig } from 'vite'export default defineConfig({server: {host: true // 监听所有地址}})效果如下：

Vite 配置篇：日常开发掌握这些配置就够了！

文章插图
 
5e157d5a4ca827d5dafbc354ff135e1.png
当手机和电脑处于同一个网络环境下，我们就可以通过下面那个地址进行访问了 。


推荐阅读


上一篇：sql实现题库按字母搜索

下一篇：林黛玉的性格特点四字 林黛玉的性格特点