使用Vite构建现代化前端应用

💓 博客主页:瑕疵的CSDN主页
📝 Gitee主页:瑕疵的gitee主页
⏩ 文章专栏:《热点资讯》

使用Vite构建现代化前端应用

    • 引言
    • Vite 简介
      • 安装 Vite
      • 创建项目
      • 启动开发服务器
      • 项目结构
      • 配置 Vite
      • 开发模式
      • 生产构建
      • 使用插件
      • 高级配置
        • 环境变量
        • 代理配置
      • 实际案例
      • 总结

引言

随着前端技术的不断发展,构建高性能和响应迅速的 Web 应用变得越来越重要。Vite 是由 Vue.js 作者尤雨溪开发的一款新型前端构建工具,它利用了 ES 模块的原生支持,提供了快速的冷启动和热更新功能。本文将详细介绍如何使用 Vite 构建现代化的前端应用,包括安装、配置、开发和部署等内容。

Vite 简介

Vite 是一个现代的前端构建工具,它的主要特点包括:

  • 快速冷启动:利用原生 ES 模块导入,Vite 可以在几秒钟内启动开发服务器。
  • 即时热更新:通过 HMR(Hot Module Replacement),Vite 可以在保存文件时立即更新页面,无需刷新浏览器。
  • 按需编译:Vite 在开发模式下按需编译模块,提高了开发效率。
  • 生产构建:Vite 提供了优化的生产构建,支持 Tree Shaking、代码分割等。

安装 Vite

在使用 Vite 之前,需要确保已经安装了 Node.js。可以使用以下命令全局安装 Vite:

npm install -g create-vite

创建项目

使用 Vite 创建一个新的项目非常简单。运行以下命令选择一个模板:

create-vite my-app

进入项目目录并安装依赖:

cd my-app
npm install

启动开发服务器

启动开发服务器:

npm run dev

打开浏览器访问 http://localhost:3000,你将看到 Vite 的欢迎页面。

项目结构

一个典型的 Vite 项目结构如下:

my-app/
├── node_modules/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── .gitignore
├── index.html
├── package.json
├── vite.config.js
└── README.md

配置 Vite

Vite 的配置文件是 vite.config.js,可以在这里进行各种配置。以下是一个基本的配置示例:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],server: {port: 3000,open: true},build: {outDir: 'dist',assetsDir: 'assets',rollupOptions: {input: 'src/main.js'}}
});

开发模式

在开发模式下,Vite 提供了快速的冷启动和即时热更新功能。每次保存文件时,Vite 会立即更新页面,无需刷新浏览器。

生产构建

构建生产版本的命令如下:

npm run build

构建完成后,生成的文件将位于 dist 目录中。你可以将这些文件部署到任何静态文件服务器上。

使用插件

Vite 支持丰富的插件生态,可以通过安装插件来扩展其功能。例如,安装 @vitejs/plugin-vue 插件以支持 Vue 3:

npm install @vitejs/plugin-vue

然后在 vite.config.js 中配置插件:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()]
});

高级配置

环境变量
Vite 支持环境变量,可以在 .env 文件中定义环境变量。例如,创建一个 .env 文件:

VITE_APP_TITLE=My App
VITE_API_URL=https://api.example.com

在代码中使用环境变量:

console.log(import.meta.env.VITE_APP_TITLE); // My App
console.log(import.meta.env.VITE_API_URL); // https://api.example.com

代理配置
在开发模式下,可以使用代理配置来解决跨域问题。在 vite.config.js 中配置代理:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],server: {proxy: {'/api': {target: 'https://api.example.com',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}}
});

实际案例

Vite 已经被广泛应用于各种场景,例如:

  • 单页应用(SPA):构建响应迅速的单页应用。
  • 多页应用(MPA):构建多个独立页面的应用。
  • 库开发:开发和发布前端库。

总结

通过本文,你已经学会了如何使用 Vite 构建现代化的前端应用。Vite 的快速冷启动和即时热更新功能使其成为现代前端开发的理想选择。
Vite 构建流程图

Vite 支持丰富的插件生态和高级配置选项,可以满足各种复杂需求。
Vite 开发模式示意图

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Node.js:模块 包

Node.js:模块 & 包 模块module对象 包npm安装包配置文件镜像源 分类 模块 模块化是指解决一个复杂问题时,自顶向下逐层把系统划分成若干模块的过程。对于整个系统来说,模块是可组合、分解和更换的单元。 简单来说,就是把一个…

【Arduino】一分钟快速在vs code 编译开发Arduino

下载Arduino 对于一些开发者来说,Arduino开发较为不方便,不管从代码的阅读性、开发效率等等方面,vs code都要优于Arduino IDE开发,而且vs code开发可以使用插件,比如一些AI代码插件,可以加快开发速率&#…

WPF+MVVM案例实战(十九)- 自定义字体图标按钮的封装与实现(EF类)

文章目录 1、案例效果1、按钮分类2、E类按钮功能实现与封装1.文件创建与代码实现2、样式引用与封装 3、F类按钮功能实现与封装1、文件创建与代码实现2、样式引用与封装 3、按钮案例演示1、页面实现与文件创建2、运行效果如下 4、源代码获取 1、案例效果 1、按钮分类 在WPF开发…

Java基本语法和基础数据类型——针对实习面试

目录 Java基本语法和基础数据类型标识符和关键字有什么区别?Java关键字有哪些?Java基本数据类型有哪些?什么是自动装箱和拆箱?自动装箱(Autoboxing)自动拆箱(Unboxing) 自动装箱和拆…

c# 值类型

目录 1、c#类型2、值类型2.1 结构体2.2 枚举 1、c#类型 类型(Type)又叫数据类型(Data Type)。 A data type is a homogeneous collection of values,effectively prensented,equipped with a set of operations which manipulate…

【压力测试】如何确定系统最大并发用户数?

一、明确测试目的与了解需求 明确测试目的:首先需要明确测试的目的,即为什么要确定系统的最大并发用户数。这通常与业务需求、系统预期的最大用户负载以及系统的稳定性要求相关。 了解业务需求:深入了解系统的业务特性,包括用户行…

【玉米叶部病害识别】Python+深度学习+人工智能+图像识别+CNN卷积神经网络算法+TensorFlow

一、介绍 玉米病害识别系统,本系统使用Python作为主要开发语言,通过收集了8种常见的玉米叶部病害图片数据集(‘矮花叶病’, ‘健康’, ‘灰斑病一般’, ‘灰斑病严重’, ‘锈病一般’, ‘锈病严重’, ‘叶斑病一般’, ‘叶斑病严重’&#x…

PAT甲级-1048 Find Coins

题目 题目大意 给出硬币的个数n和要付费的钱m&#xff0c;接下来给出每个硬币的面值。要求从这些硬币中找到两个硬币v1, v2&#xff0c;使得v1 v2 m&#xff0c;且v1 < v2&#xff0c;输出v1 v2。如果不能找到这两个硬币&#xff0c;输出No Solution。 思路 刚开始用的…

算法练习:LCR 179. 查找总价格为目标值的两个商品

题目链接&#xff1a;LCR 179. 查找总价格为目标值的两个商品 利用双指针位于数值两端来进行控制&#xff0c;定义sum来记录两指针分别对应的值的和&#xff0c; 这里有个重要的点就是该数组是升序&#xff0c;所以&#xff1a; 当sum > target时&#xff0c;end--&#x…

构建数据湖仓的开源技术栈有哪些

湖仓一体架构是一种新兴的数据管理方式&#xff0c;它融合了数据湖和数据仓库的优势&#xff0c;提供了统一的数据存储、事务支持、数据治理、实时与批处理能力以及弹性和可扩展性。在开源领域&#xff0c;湖仓一体技术栈的选择非常关键&#xff0c;因为它直接影响到系统的灵活…

每日OJ题_牛客_排序子序列_模拟_C++_Java

目录 牛客_排序子序列_模拟 题目解析 C代码 Java代码 牛客_排序子序列_模拟 排序子序列_牛客笔试题_牛客网 (nowcoder.com) 描述&#xff1a; 牛牛定义排序子序列为一个数组中一段连续的子序列,并且这段子序列是非递增或者非递减排序的。牛牛有一个长度为n的整数数…

电脑软件:推荐一款免费且实用的电脑开关机小工具

目录 一、软件简介 二、软件功能 三、软件特点 四、使用说明 五、软件下载 今天给大家推荐一款免费且实用的电脑开关机小工具KShutdown&#xff0c;有需要的朋友可以下载试一下&#xff01; 一、软件简介 KShutdown是一款精巧且实用的定时自动关机小工具&#xff0c;对于…

网关如何传递信息给微服务

前情回顾 上篇我们已经完成了网关对所有微服务请求的拦截以及JWT的登录校验。 客户端和微服务之间的桥梁--网关&#xff08;身份校验&#xff09;https://mp.csdn.net/mp_blog/creation/editor/143425484 问题引入 现在的问题是在一些微服务业务中&#xff0c;需要用到用户…

BGP路由优选+EVPN

BGP 的路由优选规则是一套多步决策链&#xff0c;用来确定在多个可行路由中选择最优的路由。BGP 是一种路径向量协议&#xff0c;通过这些优选规则&#xff0c;网络管理员可以控制数据流量的流向&#xff0c;确保网络的稳定性和效率。下面以一个实例来详细说明 BGP 的优选规则及…

Vue3图片懒加载(vue3-lazyload)

Vue2图片懒加载 参考文档&#xff1a;vue3-lazyload 效果如下图&#xff1a;vue3-lazyload0.3.8 在线预览 安装 npm install vue3-lazyload # or yarn add vue3-lazyload # or pnpm add vue3-lazyload引入并注册 import { createApp } from vue import VueLazyLoad from v…

Hudi Upsert原理

1. 前言 如果要深入了解Apache Hudi技术的应用或是性能调优&#xff0c;那么明白源码中的原理对我们会有很大的帮助。Upsert是Apache Hudi的核心功能之一&#xff0c;主要完成增量数据在HDFS/对象存储上的修改&#xff0c;并可以支持事务。而在Hive中修改数据需要重新分区或重…

ctfshow web入门文件上传总结

1.web151 前端验证 前端验证&#xff0c;修改html代码&#xff0c;上传还有一句话木马的php文件,之后用蚁剑连接即可找到flag <?php eval($_POST[1])?>2.web152 后端验证&#xff0c;修改mime类型(content-type) burp抓包&#xff0c;修改content-type为image/png …

基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)

&#x1f388;系统亮点&#xff1a;协同过滤算法、节流算法、支付宝沙盒支付、图形化分析、实时聊天&#xff1b; 一.系统开发工具与环境搭建 1.系统设计开发工具 后端使用Java编程语言的Spring boot框架 项目架构&#xff1a;B/S架构 运行环境&#xff1a;win10/win11、jdk1…

手把手写Linux第一个小程序 - 进度条(5种版本)

本专栏内容为&#xff1a;Linux学习专栏&#xff0c;分为系统和网络两部分。 通过本专栏的深入学习&#xff0c;你可以了解并掌握Linux。 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;linux &#x1f69a;代码仓库&#xff1a;小小unicorn的代…

dhcp池没有空闲ip导致手机无法获得ip

得到用户反馈&#xff0c;一个高速项目部的wifi无法接入&#xff0c;让排查原因。 反馈有的手机能接入&#xff0c;有的接入不了。查看ac界面发现有个终端获得的ip是169.254.xxx.xxx。 ip地址是169.254.96.17显然是手机打开wlan开关后&#xff0c;鉴权通过后dhcp过程&#xff0…