Vite好用的前端构建工具

这篇具有很好参考价值的文章主要介绍了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 文件文章来源地址https://www.toymoban.com/news/detail-656517.html

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()
  ]
})

到了这里,关于Vite好用的前端构建工具的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 一文详解新一代高效前端构建工具VITE-达观数据

    Vite 是一个快速、简单且高效的前端构建工具,它的出现为前端开发者带来了新的构建体验。在本文中,我们将探讨 Vite 的技术原理、优点和使用方法。 Vite 的技术原理 Vite 的核心技术是基于 ES Modules 和浏览器原生模块系统的构建工具。Vite 的构建过程是基于 ES Modules 实现的,

    2024年02月16日
    浏览(50)
  • 【前端笔记】前端包管理工具和构建打包工具介绍之npm、yarn、webpack、vite

    NPM(Node Package Manager)是node包管理器,是node.js默认采用的软件包管理系统,使用JavaScript语言编写。包管理可以理解为依赖管理,有一个npm包管理仓库,当我们执行npm命令的时候,就可以直接从npm仓库中下载对应的依赖包,类似于后端开发中的POM。 node.js中就已经安装了NPM,所

    2024年02月02日
    浏览(43)
  • 面向后端开发者,即无需涉足各类构建工具,只需面向浏览器本身的Layui框架

    Layui是一款采用自身模块规范编写的前端 UI 框架,它遵循原生的 HTML/CSS/JS 书写方式。它虽然外在极简,但是内容丰富,里面包含众多组件从核心代码到 API 都非常适合界面的快速开发。事实上layui更多是面向于后端开发者,而且它还拥有自己的模式。 Layui更多是面向于后端开

    2024年01月22日
    浏览(49)
  • 前端vue调试工具:chrome浏览器vue-devtools安装方式详述

    vue-devtools官方文档,也可按照官方文档操作 下面将介绍chrome集成vue-devtools的两种方式 通过扩展-扩展程序-访问chrome应用商店输入vue-devtools搜索插件即可 下载源码选择对应的版本tag官方源码 我们这里选择最新版本v6.5.1 下载压缩包,或clone都可以*( 克隆命令: 安装依赖以及打

    2024年03月15日
    浏览(66)
  • Microsoft Edge很好用的浏览器

    Microsoft Edge是一款现代化的浏览器,它拥有众多功能和强大的性能,为用户带来更加流畅的浏览体验。 Edge最近推出了分屏功能,支持一个窗口同时显示两个选项卡,这可以大大提高生产力和多任务处理能力。欢迎大家使用分屏及其他新功能后分享自己的使用心得与建议。 E

    2024年02月06日
    浏览(64)
  • 好用的区块链浏览器--BlockScout安装

    BlockScout是一个Elixir应用程序,允许用户搜索以太坊网络(包括所有叉子和侧链)上的交易,查看账户和余额以及验证智能合约。BlockScout为用户提供了一个全面,易于使用的界面,以查看,确认和检查EVM(以太坊虚拟机)区块链上的交易。这包括POA网络,xDai链,以太坊经典和

    2024年02月07日
    浏览(43)
  • 解决前端项目问题,uniapp运行微信开发工具小程序,出现× initialize报错,以及浏览器无法运行

    uniapp进行小程序以及多端web页面都不知道如何配置讲项目运行起来。 就会报出无法运行错误。 [微信小程序开发者工具] - initialize [微信小程序开发者工具] [微信小程序开发者工具] × IDE may already started at port , trying to connect如图 这是因为没有配置好安全设置和运行设置。 一,

    2024年01月20日
    浏览(73)
  • 推荐一个Edge浏览器中的一个好用问答插件。

       ChatGPT 是一个基于语言模型 GPT-3.5 的聊天机器人, ChatGPT 模型是Instruct GPT的姊妹模型(siblingmodel),使用强化学习和人类反馈来更好地使语言模型与人类指令保持一致。    ChatGPT 是一种基于GPT(Generative Pre-train Transformer)模型的大型语言模型,由OpenAI公司开发。它是目

    2024年02月08日
    浏览(62)
  • 安卓手机除了UC,还有哪些良心好用的浏览器可选?

    浏览器作为手机端不可缺少的APP之一,几乎每个人的手机都安装有浏览器。UC浏览器作为国内最流行的手机浏览器之一,拥有庞大的用户群体。不少人醉心于它强大的功能,但是也有一些用户因为UC令人震惊的广告,以及越来越臃肿的体积,选择弃之而去。那么,安卓手机除了

    2024年02月10日
    浏览(47)
  • 2023年哪款手机浏览器比较好用,最后一个吹爆它

    很多人不满足于手机自带的浏览器,为了更好地满足看视频、浏览网页、看小说等需求,不少人下载第三方手机浏览器来使用。我们都知道,手机浏览器是手机不可缺少的APP之一。那么,2023年哪款手机浏览器比较好用?下面分享今年口碑好、且比较好用、实用的手机浏览器。

    2024年02月09日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包