Vite好用的前端构建工具

是什么

Vite是Vue的作者尤雨溪开发的 一种新型前端构建工具。

Vite在大型项目开发模式下,打包速度远高于webpack。

Vite 为什么这么快

1. 快速冷启动

Vite只启动一台静态页面的服务器,不会打包全部项目文件代码,服务器根据客户端的请求加载不同的模块处理,实现按需加载

而我们所熟知的webpack则是,一开始就将整个项目都打包一遍,再开启dev-server,如果项目规模庞大,时间必然很长。

2. 热模块更新

对于热更新问题,Vite采用立即编译当前修改文件的办法,同时结合vite的缓存机制(http缓存 ==》 Vite内置缓存),加载更新后的文件内容

3. 打包编译速度

Vite使用esbuild预构建依赖,而esbuild是用Go编写的,比JS编写的打包器快很多。

常用配置

vite.config.js 文件

js 复制代码
import { defineConfig } from 'vite' // 使用 defineConfig 工具函数获取类型提示:
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({

  /* ==============================================》 打包配置 《============================================== */
  /*
  * base: 当使用 yarn build 命令构建应用程序时,base 配置项会影响生成的静态文件的路径,确保在部署时能够正确访问到这些文件。
  * 如果应用程序部署在域名的 根路径 下,则可以将 base 配置项 省略 或设 为 '/', 实际开发中这是大多数情况。
  * 当应用程序部署到不同路径下时,base 配置项非常有用。例如,如果您的应用程序部署在域名的 子路径 下,
  * 如 https://www.example.com/my-app/,则需要这么配置==> base: '/my-app/'
  */
  base: '/foo/', // 开发或生产环境服务的公共基础路径

  build: {
    outDir: 'build', // 打包文件 的 输出目录
    assetsDir: 'static', // 静态资源 的 存放目录
    assetsInlineLimit: 4096 // 图片转 base64 编码的阈值
  },



  /*  ==============================================》 开发配置 《============================================== */
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src') // 路径别名
    },
    extensions: ['.js', '.ts', '.json'] // 导入时想要省略的扩展名列表,不建议包含 .vue 因为他会影响 IDE 和类型的支持。
  },

  server: {
    /* 将 host 设置为 true 或 0.0.0.0 ,这样服务器就会监听所有地址,包括局域网和公网地址。当手机和电脑处于同一个网络环境下,就可以通过地址进行访问了。 */
    host: true, 

    /* 反向代理也是经常会用到的一个功能,通常使用它来进行跨域: */
    proxy: {
      // 字符串简写写法
      '/foo': 'http://localhost:4567',
      // 选项写法
  
      "/zlhx": {
        target: "http://localhost:8008",
        changeOrigin: true,
        rewrite: path => path.replace(/^\/zlhx/, "zlhx")
      }
  
      // 正则表达式写法
      '^/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
      }
    }
  },
  
  //  插件
  plugins: [
    vue(),
    viteMockServe()
  ]
})
相关推荐
yi碗汤园1 小时前
【超详细】C#自定义工具类-StringHelper
开发语言·前端·unity·c#·游戏引擎
Kevin Wang7272 小时前
解除chrome中http无法录音问题,权限
前端·chrome
vipbic2 小时前
使用Cursor开发Strapi5插件bag-strapi-plugin
前端·ai编程·cursor
专注前端30年2 小时前
【JavaScript】reduce 方法的详解与实战
开发语言·前端·javascript
ikoala2 小时前
Node.js 25 正式发布:性能飙升、安全升级、全面向 Web 靠拢!
前端·面试·node.js
陈振wx:zchen20082 小时前
前端-ES6-11
前端·es6
菜鸟una3 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年3 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
文火冰糖的硅基工坊4 小时前
[嵌入式系统-146]:五次工业革命对应的机器人形态的演进、主要功能的演进以及操作系统的演进
前端·网络·人工智能·嵌入式硬件·机器人
2401_837088504 小时前
ResponseEntity - Spring框架的“标准回复模板“
java·前端·spring