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

news2025/1/21 18:38:07

不知道有没有这样的兄弟，学习 Vite 的时候，官网上各种配置看的是眼花缭乱。不知道哪些需要掌握，哪些只用简单了解一下。为了提高大家的效率，我把项目中常用的配置梳理了一下分享给大家，希望对你上手 Vite 有所帮助。话不多说，开干！

css.preprocessorOptions

传递给 CSS 预处理器的配置选项，这些配置会传递到预处理器的执行参数中去。例如，在 scss 中定义一个全局变量：

// vite.config.js
import { defineConfig } from 'vite' // 使用 defineConfig 工具函数获取类型提示：

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$injectedColor: orange;` // 全局变量
      }
    }
  }
})

我们也可以定义一个全局变量文件，然后再引入这个文件：

// src/assets/styles/variables.scss
$injectedColor: orange;
$injectedFontSize: 16px;

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import '/src/assets/styles/variables.scss';` // 引入全局变量文件
      }
    }
  }
})

这样在 .scss 文件或 .vue 文件中就可以使用这些变量了。

css.postcss

PostCSS 也是用来处理 CSS 的，只不过它更像是一个工具箱，可以添加各种插件来处理 CSS 。像浏览器样式兼容问题、浏览器适配等，都可以通过 PostCSS 来解决。

Vite 对 PostCSS 有良好的支持，我们只需要安装相应的插件就可以了。如移动端使用 postcss-px-to-viewport 对不同设备进行布局适配：

npm install postcss-px-to-viewport -D

// vite.config.js
import { 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.js
import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src') // 路径别名
    }
  }
})

我们也可以使用插件，来自动给 src 和 src 下所有的文件夹定义路径别名：

// vite.config.js
import { defineConfig } from 'vite'
import { ViteAliases } from './node_modules/vite-aliases' // 通过名称引入会报错，可能是插件问题

export default defineConfig({
  plugins: [
    ViteAliases()
  ]
})

相应的路径别名如下：

src -> @
  assets -> @assets
  components -> @components
  router -> @router
  stores -> @stores
  views -> @views
  ...

resolve.extensions

导入时想要省略的扩展名列表。默认值为 ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'] 。

// vite.config.js
import { 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.js
import { 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.js
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    host: true // 监听所有地址
  }
})

效果如下：

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

server.proxy

反向代理也是我们经常会用到的一个功能，通常我们使用它来进行跨域：

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      // 字符串简写写法
      '/foo': 'http://localhost:4567',
      // 选项写法
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      // 正则表达式写法
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, '')
      },
      // 使用 proxy 实例
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy 是 'http-proxy' 的实例
        }
      },
      // Proxying websockets or socket.io
      '/socket.io': {
        target: 'ws://localhost:3000',
        ws: true
      }
    }
  }
})

base

开发或生产环境服务的公共基础路径。可以是以下几种值：

  • 绝对 URL 路径，例如 /foo/
  • 完整的 URL，例如 https://foo.com/
  • 空字符串或 ./（用于嵌入形式的开发）
// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  base: '/foo/' // 开发或生产环境服务的公共基础路径
})

build.outdir

指定打包文件的输出目录。默认值为 dist ，当 dist 被占用或公司有统一命名规范时，可进行调整。

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    outDir: 'build' // 打包文件的输出目录
  }
})

build.assetsDir

指定生成静态资源的存放目录。默认值为 assets ，可根据需要进行调整。

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    assetsDir: 'static' // 静态资源的存放目录
  }
})

build.assetsInlineLimit

图片转 base64 编码的阈值。为防止过多的 http 请求，Vite 会将小于此阈值的图片转为 base64 格式，可根据实际需求进行调整。

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    assetsInlineLimit: 4096 // 图片转 base64 编码的阈值
  }
})

plugins

插件相信大家都不陌生了。我们可以使用官方插件，也可以社区插件。如使用 @vitejs/plugin-vue 提供 Vue3 单文件组件的支持，使用 vite-plugin-mock 让我们更轻松地 mock 数据。

npm i mockjs -S
npm i vite-plugin-mock -D

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  plugins: [
    vue(),
    viteMockServe()
  ]
})

更多社区插件，大家可以查看 awesome-vite 。当然如果有特殊需求，我们也可以自己写一个插件。后续我也会带大家手写一个自己的插件。

完整代码

// vite.config.js
import { defineConfig } from 'vite' // 使用 defineConfig 工具函数获取类型提示：
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  base: '/foo/', // 开发或生产环境服务的公共基础路径
  optimizeDeps: {
    force: true // 强制进行依赖预构建
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import '/src/assets/styles/variables.scss';` // 引入全局变量文件
      }
    },
    postcss: {
      plugins: [
        // viewport 布局适配
        postcssPxToViewport({
          viewportWidth: 375
        })
      ]
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src') // 路径别名
    },
    extensions: ['.js', '.ts', '.json'] // 导入时想要省略的扩展名列表
  },
  server: {
    host: true, // 监听所有地址
    proxy: {
      // 字符串简写写法
      '/foo': 'http://localhost:4567',
      // 选项写法
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      // 正则表达式写法
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, '')
      },
      // 使用 proxy 实例
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy 是 'http-proxy' 的实例
        }
      },
      // Proxying websockets or socket.io
      '/socket.io': {
        target: 'ws://localhost:3000',
        ws: true
      }
    }
  },
  build: {
    outDir: 'build', // 打包文件的输出目录
    assetsDir: 'static', // 静态资源的存放目录
    assetsInlineLimit: 4096 // 图片转 base64 编码的阈值
  },
  plugins: [
    vue(),
    viteMockServe()
  ]
})

小结

其实日常开发掌握这些配置就足够了，如果遇到特殊的场景我们再去查文档就可以，而不需要一开始就把所有配置都学习一遍。Vite 配置整体来说和 Webpack 大同小异，只不过 Vite 更傻瓜式，把能做的基本都帮我们做好了。我们只用修改少量配置，甚至不用修改配置，就可以满足日常开发的需求。

你还知道哪些常用的配置呢，欢迎在评论区留言。也欢迎关注我的专栏 Vue3 特训营 ，后面我会分享更多 Vue3 和 Vite 相关的知识。

如果本文对你有所帮助，记得点个赞呦！😋

参考资料：Vite 官方中文文档

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/408523.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

若依框架前端切换TagView时刷新问题

若依框架前端切换TagView时刷新问题

若依框架点击顶部tag切换时，永远都是刷新的。刷新问题两种情况：普通view切换时刷新及iFrame切换刷新 一、普通view切换时刷新 原因是view的name与在菜单填写的大小写不一致，按若依框架规则，路由地址必须写为 camel 驼峰命名形式&…
阅读更多...
前端：Tomcat服务器部署Web项目

前端：Tomcat服务器部署Web项目

文章目录1.1 C/S架构1.2 B/S架构2.1 服务器2.2 常见服务器3.1 Tomcat安装3.2 Tomcat使用3.3 Tomcat配置3.4 Tomcat项目部署4.1 Servlet技术4.2 Servlet配置4.3 配置测试4.4 Servlet部署5.1 IDEA部署1.1 C/S架构 Client / Server客户端/服务器 客户端作为独立程序 图形效果较好…
阅读更多...
【面试题】面试官： Vue如何实现权限管理？

【面试题】面试官： Vue如何实现权限管理？

我正在参加「掘金启航计划」 一、权限管理 权限管理就是让不同的用户只能访问自己权限内的资源，有以下几种 路由权限，用户登录后只能看到自己权限内的导航菜单，且只能访问自己权限内的路由地址视图权限，用户只能看到自己权限内…
阅读更多...
为你心仪的她做一个 “旋转木马“告白相册【零基础纯 CSS3 实现】

为你心仪的她做一个 “旋转木马“告白相册【零基础纯 CSS3 实现】

💳 效果展示： 旋转相册效果里面就不放女朋友的美照了防止虐狗 🥰🥰🥰，就用个前端技能树的图片代替哈，有需要大家自行替换。 💳 源码获取： 源码我已经上传到了资源里&…
阅读更多...
Django web开发(二) - Mysql数据库

Django web开发(二) - Mysql数据库

文章目录Mysql数据库Mysql的安装(CentOS7)下载修改配置文件Mysql强制重置密码远程可登录数据库管理数据表的管理常用数据类型数据管理添加数据查询数据删除数据修改数据员工管理Python管理数据库添加数据查询数据删除数据修改数据案例: Flask Mysql案例: 查询所有用户Mysql数据…
阅读更多...
Three.js 渲染glb，gltf模型（保姆级教程）

Three.js 渲染glb，gltf模型（保姆级教程）

1.准备工作 将下列文件在three.js的包中找到，注意的是我这里使用的是模块化版本的，这里不知道模块化的，可以先去看一下es6的模块化。 控制器： OrbitControls.js 加载器：GLTFLoader.js 材质： RoomEnviron…
阅读更多...
echarts折线图流动特效的实现（非平滑曲线）

echarts折线图流动特效的实现（非平滑曲线）

1.实现效果 2.实现原理 echarts官网：series-lines 注意：流动特效只支持非平滑曲线（smooth：false） series-lines路径图： 用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线&#xff…
阅读更多...
若依框架：前端登录组件与图像验证码

若依框架：前端登录组件与图像验证码

在上一篇《若依框架：前端项目结构与初始页面渲染流程》中，我们探讨了与“vue.config.js文件配置、.env模式和环境变量配置、vue-router全局导航守卫配置、vue-router路由配置简介”相关的内容，书接上回，我们继续探讨若依前端项目的…
阅读更多...
前端实现在线预览Word文件

前端实现在线预览Word文件

简介 在项目中遇到了个需求，大致需求这样的：用户在上传文件前需要先预览一下内容，确认内容是否正确，正确的情况下才可以上传； 那么这里面会涉及到一个在上传前的文档的预览操作，下面就记录一下踩坑记录 d…
阅读更多...
uni-app ——使用uploadFile上传多张图片

uni-app ——使用uploadFile上传多张图片

前言：最近的工作中出现了一个功能点，具体写法我在前面的文章中已经阐述过，不过之前的情况是上传图片调用后端的一个接口，整个表单页面提交的时候调用的是另一个接口，我也从中学到了另外的一种方法，写到这里…
阅读更多...
UniApp Scroll-View 设置占满下方剩余高度的方法小记

UniApp Scroll-View 设置占满下方剩余高度的方法小记

前言：点滴积累，贵在坚持一、布局描述：屏幕分为上下两部分，上面部分高度固定，比如 400rpx（单位可以指定为其他的比如px、upx等，高度也可以自己设定），下面部分为 scroll-vi…
阅读更多...
css渐变

css渐变

1. 线性渐变（是从一个方向到另一个方向的渐变） 属性值：background：linear-gradient（颜色） ✍默认值：从上到下线性渐变： 代码： 结果： ✍ 属性延伸&#x…
阅读更多...
axios—使用axios请求REST接口—发送get、post、put、delete请求

axios—使用axios请求REST接口—发送get、post、put、delete请求

文档：GitHub - axios/axios: Promise based HTTP client for the browser and node.js 目录 一、axios发送get请求 简写版get请求 完整版get请求 get请求怎么在路径上携带参数 二、axios发送post请求 简写版post请求 完整版post请求 其他方式发送post请求 三…
阅读更多...
HBuilderX 安装教程

HBuilderX 安装教程

💌 所属专栏：【软件安装教程】 😀 作  者：我是夜阑的狗🐶 🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享 ，欢迎咨询！ &#x1f496…
阅读更多...
element日期选择器el-date-picker样式

element日期选择器el-date-picker样式

1、基本用法 代码&#xff1a; <el-date-pickertype"date"v-model"valueStart"value-format"yyyy-MM-dd"placeholder"开始时间" ></el-date-picker>代码解读&#xff1a; type参数是用来定义选择器选择的对象&#xff…
阅读更多...
【汇总3种】vue项目中【H5】如何处理后端返回的支付宝form表单，如何实现支付跳转？

【汇总3种】vue项目中【H5】如何处理后端返回的支付宝form表单，如何实现支付跳转？

背景&#xff1a; 现在的项目&#xff0c;都需要付款&#xff0c;难免涉及支付宝或者微信支付。如果是支付宝支付&#xff0c;很多人都说&#xff0c;都已经2202年了&#xff0c;支付宝返回的还是form表单&#xff0c;然后&#xff0c;唤起支付宝的界面。 一般来说&#xf…
阅读更多...
【JavaScript 进阶教程】汽车商城根据价格区间筛选车辆案例

【JavaScript 进阶教程】汽车商城根据价格区间筛选车辆案例

本案例源码链接&#xff08;非VIP可私聊获取&#xff09;&#xff1a;https://download.csdn.net/download/weixin_52212950/86286910https://download.csdn.net/download/weixin_52212950/86286910 文章导读&#xff1a; 这篇文章实现一个小案例&#xff1a;在购物平台选商品…
阅读更多...
axios二次封装(详细+跨域问题)

axios二次封装(详细+跨域问题)

一&#xff0c;为什么要对axios进行二次封装&#xff1f; 答&#xff1a;主要是要用到请求拦截器和响应拦截器; 请求拦截器&#xff1a;可以在发请求之前可以处理一些业务 响应拦截器&#xff1a;当服务器数据返回以后&#xff0c;可以处理一些事情 二&#xff0c;axios的二次…
阅读更多...
html/javascript实现简单的上传

html/javascript实现简单的上传

一、 上传用到的按钮类型是type file 二、 为了美化上传按钮&#xff0c;我们通常会自定义按钮&#xff0c;将默认的上传隐藏掉。 fileInputs.click() 触发上传按钮点击 三、 new FileReader() 读取文件内容方法&#xff1a; readAsText() 读取文本文件&#xff0c;(可以使用…
阅读更多...
NodeJs - for循环的几种遍历方式

NodeJs - for循环的几种遍历方式

NodeJs - for循环的几种遍历方式一. for循环的几种遍历方式1.1 遍历的目标不一样1.2 空属性的遍历1.3 异步的调用二. 总结一. for循环的几种遍历方式 我们先来看下for循环的4种不同遍历方式&#xff1a; const arr [10,20,30,40,50];for (let i 0; i < arr.length; i) {…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023