Vite 完整版详解

1. 打包构建:

Vite 使用 Rollup 作为默认的构建工具。通过运行 npm run build 命令,Vite 会将应用程序的源代码打包成一个或多个优化的静态文件,以便在生产环境中进行部署。Vite 的构建过程会根据需要进行代码拆分、压缩和优化,以提供最佳的性能和文件大小。

# package.json
{"scripts": {"build": "vite build"}
}

2. 环境变量:

Vite 支持在项目中使用环境变量。您可以在项目的根目录下创建一个 .env 文件,并在其中定义您需要的环境变量。然后,在您的代码中,可以使用 import.meta.env 对象来访问这些环境变量。Vite 会根据当前的环境自动加载相应的环境变量文件,例如 .env.development.env.production 等。

# .env
VITE_API_URL=https://api.example.com
VITE_APP_NAME=My App# main.js
console.log(import.meta.env.VITE_API_URL); // 输出:https://api.example.com
console.log(import.meta.env.VITE_APP_NAME); // 输出:My App

3. 模式:

Vite 支持两种模式:开发模式和生产模式。在开发模式下,Vite 会提供一个开发服务器,实现快速的冷启动和热重载,以便在开发过程中获得即时的反馈。在生产模式下,Vite 会对应用程序进行优化和打包,以提供更高的性能和更小的文件大小。

# package.json
{"scripts": {"dev": "vite","build": "vite build"}
}

4. 兼容老浏览器:

Vite 默认情况下不支持老版本的浏览器,因为它使用了一些现代的 JavaScript 特性和浏览器原生模块的功能。但是,您可以通过配置文件来启用对老浏览器的支持。通过设置 target 选项为 es2015,并使用 @vitejs/plugin-legacy 插件,您可以将您的应用程序转换为兼容老浏览器的代码。

# vite.config.js
import { defineConfig } from 'vite';
import legacy from '@vitejs/plugin-legacy';export default defineConfig({plugins: [legacy({targets: ['ie >= 11'],additionalLegacyPolyfills: ['regenerator-runtime/runtime']})]
});

5. TypeScript 相关:

Vite 对 TypeScript 提供了原生的支持。您可以在项目中使用 TypeScript 来编写代码,并且 Vite 会自动识别和编译 TypeScript 文件。在使用 TypeScript 的同时,您可以享受到 Vite 带来的快速的冷启动和热重载的特性。

# main.ts
import { createApp } from 'vue';
import App from './App.vue';const app = createApp(App);
app.mount('#app');

6. 基本配置:

Vite 的基本配置可以通过一个名为 vite.config.js 的配置文件进行设置。在这个配置文件中,您可以自定义各种选项,例如入口文件、输出路径、插件配置等。您还可以根据需要使用不同的插件来扩展 Vite 的功能。

# vite.config.js
import { defineConfig } from 'vite';export default defineConfig({root: './src',base: '/my-app/',plugins: [],build: {outDir: '../dist',assetsDir: 'assets',sourcemap: true}
});

核心配置全集

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import legacy from '@vitejs/plugin-legacy';
import { resolve } from 'path';export default defineConfig({root: resolve(__dirname, './src'),base: '/my-app/',build: {outDir: resolve(__dirname, './dist'),assetsDir: 'assets',sourcemap: true,rollupOptions: {external: ['axios'],output: {globals: {axios: 'axios'}}}},plugins: [vue(),legacy({targets: ['ie >= 11'],additionalLegacyPolyfills: ['regenerator-runtime/runtime']})],server: {port: 3000,proxy: {'/api': {target: 'https://api.example.com',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}}
});
  • root:指定项目的根目录路径。
  • base:指定项目的基础路径,用于指定静态资源的引用路径。
  • build:用于配置构建相关的选项,包括输出目录、静态资源目录、是否生成源映射等。
  • plugins:用于配置 Vite 插件,例如 @vitejs/plugin-vue@vitejs/plugin-legacy
  • server:用于配置开发服务器的选项,包括端口号、代理等。

此外,示例代码中还展示了一些其他的配置选项的使用:

  • rollupOptions:用于配置 Rollup 的选项,例如外部依赖和全局变量。
  • proxy:用于配置开发服务器的代理选项,用于将请求代理到其他服务器。

整体代码示例

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';export default defineConfig({plugins: [vue()],resolve: {alias: {'@': path.resolve(__dirname, 'src')}},server: {port: 3000}
});

这是一个基本的 Vite 配置文件,包括了以下配置选项:

  • plugins:使用 @vitejs/plugin-vue 插件来支持 Vue 单文件组件。
  • resolve.alias:设置别名,将 @ 指向项目的 src 目录,方便在代码中使用绝对路径引入模块。
  • server.port:设置开发服务器的端口号为 3000。

接下来,我们可以在 src 目录下创建一个简单的 Vue 应用:

<!-- App.vue -->
<template><div><h1>Hello Vite!</h1><p>{{ message }}</p></div>
</template><script>
export default {data() {return {message: 'Welcome to Vite!'};}
};
</script><style>
h1 {color: blue;
}
</style>
// main.js
import { createApp } from 'vue';
import App from './App.vue';createApp(App).mount('#app');

在项目根目录下运行 npm install 安装依赖,然后使用 npm run dev 启动开发服务器。在浏览器中打开 http://localhost:3000,您将看到一个简单的 Vue 应用,显示 “Hello Vite!” 和 “Welcome to Vite!”。

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

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

相关文章

JAVA黑马程序员day12--集合进阶(下部--双列集合)

Map HashMap 练习一 需提前定义学生类&#xff0c;并重写HashMap方法&#xff08;不然无法覆盖&#xff09; public class MapDemo4 {public static void main(String[] args) {//1.创建HashMap对象HashMap<Student,String> hmnew HashMap<>();//2、创建3个学生对…

Rust更换Cargo国内源,镜像了寂寞

换皮不换身 换了国内源&#xff0c;构建时该卡还会卡。因为它所谓的换源&#xff0c;只是更换crates.io“索引”的源&#xff0c;而不是package“内容”的源。换了国内源后&#xff0c;在国内编译时访问 crates.io-index 自然会快很多&#xff0c;可是crates.io-index里面的信…

【LeetCode与《代码随想录》】贪心算法篇:做题笔记与总结-JavaScript版

代码随想录 贪心的本质是选择每一阶段的局部最优&#xff0c;从而达到全局最优。 文章目录 455. 分发饼干376. 摆动序列53. 最大子数组和122. 买卖股票的最佳时机 II55. 跳跃游戏45. 跳跃游戏 II1005. K 次取反后最大化的数组和134. 加油站135. 分发糖果&#xff08;困难&#…

string的使用和模拟实现

&#x1f493;博主个人主页:不是笨小孩&#x1f440; ⏩专栏分类:数据结构与算法&#x1f440; C&#x1f440; 刷题专栏&#x1f440; C语言&#x1f440; &#x1f69a;代码仓库:笨小孩的代码库&#x1f440; ⏩社区&#xff1a;不是笨小孩&#x1f440; &#x1f339;欢迎大…

iisfastchi漏洞复现

1.查看版本 2.在路径中写入 php脚本 发现使用不了 3.环境搭建 结局打开 把限制打开

SideBar 侧边导航与内容区域交互重写【Ant Design Mobile】

需求&#xff1a;SideBar 侧边导航与内容区域交互 点击侧边栏某一项时&#xff0c;相对应内容区域滚动到视口顶部滚动视口区域&#xff0c;到某一项内容区域&#xff0c;侧边栏选中状态也会跟着变化 const SideBarAgain: React.FC<PopupProps> (props) > {// 父组件…

可扩展性表设计方案

文章目录 1 使用预留字段2 使用JSON字段3 使用单表继承4 构建属性表5 直接构建新表6 适当冗余 1 使用预留字段 在表设计初期&#xff0c;可以预留一些命名通用的备用字段&#xff0c;例如field1、field2、field3。当业务需要增加新字段时&#xff0c;就直接使用这些预留字段,无…

Xilinx FPGA 7系列 GTX/GTH Transceivers (1)

初识Xlilix GTX 1概述 Xilinx 7系列FPGA全系所支持的GT,GT资源是Xilinx系列FPGA的重要卖点,也是做高速接口的基础,GT的意思是Gigabyte Transceiver,G比特收发器。不管是PCIE、SATA、MAC等,都需要用到GT资源来做数据高速串化和解串处理,Xilinx不同的FPGA系列拥有不同的G…

Kafka中Consumer源码解读

Consumer源码解读 本课程的核心技术点如下&#xff1a; 1、consumer初始化 2、如何选举Consumer Leader 3、Consumer Leader是如何制定分区方案 4、Consumer如何拉取数据 5、Consumer的自动偏移量提交 Consumer初始化 从KafkaConsumer的构造方法出发&#xff0c;我们跟踪到…

前端JavaScript中异步的终极解决方案:async/await

&#x1f3ac; 岸边的风&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 1. 背景 在深入讨论 async/await 之前&#xff0c;我们需要了解一下 JavaScript 的单线程和非阻塞的特性。JavaScript 是…

AD22使用笔记+积累库

一、前言 使用AD9习惯了&#xff0c;但是需求逐渐上来了就不够用了&#xff0c;好多快捷的新功能要新版本软件才能用&#xff0c;所以升级使用AD22 目录 1.添加层之后中间层无法布线 2.新增快捷方式CtrlW布线&#xff0c;不用点图标了 二、环境 AD22 三、正文 1.添加层之…

SpringBoot-RabbitMQ

RabbitMQ 是一个开源的消息中间件&#xff0c;它实现了 AMQP&#xff08;Advanced Message Queuing Protocol&#xff09;协议&#xff0c;并提供了可靠的消息传递机制。 Spring Boot 中使用 RabbitMQ 实现异步消息的发送和接收。 使用 Spring Boot 提供的 AmqpTemplate 和 Rab…

Redis Part1

单体架构&#xff1a;一台Web服务器、一台数据库服务器。 1.了解NoSql 什么是Nosql&#xff1f; NoSQL&#xff0c;即Not-Only-SQL&#xff0c;意思就是我们干事情不能只用SQL&#xff0c;泛指非关系型的数据库&#xff01;NoSQL定位&#xff1a;作为关系型数据库的补充&am…

小米OPPO三星一加红魔全机型解锁BL详细教程合集-ROOT刷机必要操作

解锁BL一个熟悉又陌生的词汇&#xff0c;只要你刷机root过&#xff0c;你肯定都解锁BL成功过。我们简单的描述下BL是什么&#xff1f;BL全名bootloader&#xff0c;目前市面上全部机型&#xff0c;基本出厂全部BL处于锁定的状态锁定的BL机型&#xff0c;不支持刷入非官方固件或…

性能测试 —— Jmeter事务控制器

事务&#xff1a; 性能测试中&#xff0c;事务指的是从端到端&#xff0c;一个完整的操作过程&#xff0c;比如一次登录、一次 筛选条件查询&#xff0c;一次支付等&#xff1b;技术上讲&#xff1a;事务就是由1个或多个请求组成的 事务控制器 事务控制器类似简单控制器&…

广州口腔医院种植牙-广东省爱牙工程公益种牙,获湾区群众点赞

广州种植牙价格表-自2017年成立以来,广东省爱牙工程一直坚持以公益惠民为宗旨、公益种牙为服务方向,针对群众普遍存在的口腔健康问题,开展形式多样的公益性口腔医疗惠民活动。 广州种植牙费用表-日前,广东省爱牙工程“种植牙惠民行动”第二十季已正式启动。据广东省爱牙工程官方…

韩信点兵:求韩信一共有多少兵

任务描述 本关任务&#xff1a;求韩信一共有多少兵。 韩信有一队兵&#xff0c;他想知道有多少人&#xff0c;便让士兵排队报数。 按从 1 至5报数&#xff0c;最末一个士兵报的数为 1&#xff1b; 按从 1 至 6 报数&#xff0c;最末一个士兵报的数为 5&#xff1b; 按从 1 …

栈与队列--删除字符串中的所有相邻重复项

给出由小写字母组成的字符串 S&#xff0c;重复项删除操作会选择两个相邻且相同的字母&#xff0c;并删除它们。 在 S 上反复执行重复项删除操作&#xff0c;直到无法继续删除。 在完成所有重复项删除操作后返回最终的字符串。答案保证唯一。 示例&#xff1a; 输入&#x…

C/C++指针函数与函数指针

一、指针函数 指针函数&#xff1a;本质为一个函数&#xff0c;返回值为指针指针函数&#xff1a;如果一个函数的返回值是指针类型&#xff0c;则称为指针函数用指针作为函数的返回值的好处&#xff1a;可以从被调函数向主函数返回大量的数据&#xff0c;常用于返回结构体指针。…