“vite”和“vite预览”有什么区别？

已于 2022-08-03 11:26:12 修改
阅读量2.2k 收藏 4
点赞数 2
分类专栏： HTML前端 文章标签： java 前端 数据库
于 2022-08-03 09:22:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44786530/article/details/126133883
版权
这篇博客介绍了使用npm init创建项目时生成的三种命令：dev用于开发环境的HMR热更新，build用于生成项目并输出到/dist，preview则提供预览已构建的解决方案的本地服务器。完成项目创建后，需要通过npm install安装依赖才能启动项目。
摘要由CSDN通过智能技术生成

使用npm init vite创建项目时候，生成的项目中存在如下命令：

它们的区别是：

dev 使用HMR启动本地web服务器进行开发

build 生成项目，并输出到文件夹。/dist

preview 启动一个本地web服务器，该服务器从/dist为构建的解决方案提供预览服务

创建完项目之后，需要使用npm i 安装依赖才可以启动项目：

 

1024小神
关注
专栏目录
谈谈你对vite的了解
Cipher_Y的博客
07-13 224
vite是新一代前端构建工具，能够显著提升前端开发体验。他是使用rollup打包你的代码，是开箱即用的，同时也提供了丰富的插件api,带来了高度的可扩展性。可以构建vue，react 等项目。
Vite 介绍
qq_41005300的博客
12-09 1424
具有 HMR 功能的框架可以利用该 API 提供即时、准确的更新，而无需重新加载页面或清除应用程序状态。标签中，同时也带有 HMR 支持。也能够以字符串的形式检索处理后的、作为其模块默认导出的 CSS。并假设类型检查已经被你的 IDE 或构建过程接管了（你可以在构建脚本中运行。Vite 通过原生 ESM 导入提供了许多主要用于打包场景的增强功能。Vite 默认的类型定义是写给它的 Node.js API 的。Vite 提供了一套原生 ESM 的。对 Preact 实现了官方集成。Vite 天然支持引入。
Vite 的打包和预览功能
weixin_42776027的博客
09-09 8584
而在打包成功后，我们通常需要在浏览器中测试一下打包出来的东西有没有问题，那么一种方法是通过。而在开发完成后，我们需要将项目代码打包到指定的输出文件夹（比如。）中，之后再到服务器中部署打包出来的这个文件夹。而如果是在打包之后，想要预览打包出来的代码的效果，那就执行。之后，如果是在开发阶段想要把项目跑起来，那就直接执行。这个预览的效果也就是我们打包出来的效果。当然，在真实开发中，我们一般不会一直敲。打包成功后，会在项目目录下生成一个。会默认把我们的代码打包进。文件中会存放第三方的资源。的打包和预览功能的说明。
vite 和 vite preview的区别？
最新发布
weixin_38662465的博客
06-19 321
搭建vue+vite 项目，pnpm dev 和 pnpm preview有什么不同？2、vite preview 是启动本地 web 服务器，是预览打包后的dist文件。3、所以在运行vite preview 之前先运行build构建生成dist文件。1、vite 是使用HMR启动本地 web 服务器进行开发。
Vite - 开发初体验，以及按需导入配置
CYK_byte的博客
06-09 3016
a）这里我们只需要在 vite.config.js 文件中引入 elementPlus 的解析器，然后把她交给 Components 按需引入插件即可.之后就可以观察到项目中多出了 node_modules 文件（这个文件中存放的就是下载好的依赖），然后通过 npm run dev 就可以成功了。c）接下来你会发现，在 Home.vue 组件中使用 Foo.vue 组件，就可以不用写 import 了~a）例如我们在 Home.vue 文件中使用 ref 写了一个计数器（点击按钮，count++）.
vite源码分析之dev
qq_44859233的博客
05-27 1914
最近研究socket, 所以就顺便看了一下vite源码, vite的热更新就是根据socket实现的, 所以正好记录一下.前端任何脚手架的入口,肯定是在package.json文件中,当我们输入script命令时, 会经历什么样的步骤呢?接下来我们一起来探索一下~~~
[vue3.0 + vite] 入门体验
qq_34450741的博客
12-06 420
彩蛋：后台管理系统一站式平台模板 vue-admin-wonderful，一套为开发者快速开发准备的基于 vue2.x 越看越精彩的后台管理系统一站式平台模板。基于element ui 2.14.1 1、安装 # 全局安装 npm install create-vite-app -g # 创建项目 create-vite-app vue3-vite # 进入目录 cd vue3-vite # 安装依赖 npm install # 运行 npm run dev 2、浏览器打开 http://loca
vite基本知识
weixin_小白鼠的博客
12-17 543
开发时，并不对代码打包，而实直接采用ESM的方式运行项目一项目部署时，再对项目进行打包其核心原理是利用浏览器现在已经支持ES6的import，碰见import就会发送一个HTTP请求去加载文件使用vite运行项目时，首先会用esbuild。
如何通过vue3和vite实现在线预览pdf功能，供大家学习研究参考
11-16
} function pageZoomIn() { if (state.scale > 0.8) { state.scale -= 0.1; } } onMounted(() => { pdfjsLib.GlobalWorkerOptions.workerSrc = "./pdf.worker.js"; const loadingTask = pdfjsLib.getDocument...
vite-plugin-ssr-ssg:适用于SSR和SSG的Vite插件
03-25
在SSR和CSR中预览 :dizzy: 快速开始 在您的项目中 yarn add -D vite-plugin-ssr-ssg yarn vite-ssrg init :shamrock: 支持 框架的支持状态如下。 React 皮特 Vue Card.svelte 轻元素 香草 :check_mark_...
vscode-vite：VS Code中的Vite快一步
03-03
:rocket: 无需离开编辑器即可预览/调试应用 opening在打开新项目时提示快速安装节点模块（ npm i yarn pnpm i ） :package: 一键式构建和服务 :counterclockwise_arrows_button: 一键重启服务器 :battery: 由...
vite构建的纯净项目可以用于基础项目构建，简单可用，vue项目脚手架vite
03-23
例如，`npm run dev`命令就是从这里定义的，它会启动Vite的开发服务器，让你可以在浏览器中实时预览和调试代码。 4. **public**：这是一个公共目录，其中的文件会被Vite原封不动地复制到构建输出中，通常用来存放...
vite preview 和vite命令有什么区别
05-17
Vite 是一个现代化的前端构建工具，提供了多种命令来帮助我们构建和开发项目，其中包括 `vite preview` 和 `vite serve` 命令。 `vite preview` 命令是 Vite 特有的命令，用于预览生产环境构建后的项目。它会启动一...
Vue3+Vite前端知识汇总1篇
琼楼玉宇
07-22 365
ps: 让vscode认识@
vite个人笔记
yi742891270的博客
11-18 740
以VITE_为前缀！！比如。
Vite 完整版详解
weixin_51225684的博客
11-11 2万+
一些较大的依赖（例如有上百个模块的组件库）处理的代价也很高。：通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX，CSS 或者 Vue/Svelte 组件），时常会被编辑。同时，并不是所有的源码都需要同时被加载（例如基于路由拆分的代码模块）除了默认的developmen和production还可以自定义模式，如可能希望有一个 “staging” (预发布|预上线) 模式，它应该具有类似于生产的行为，但环境变量与生产环境略有不同。响应浏览器请求的过程中，不可避免的导致首屏性能下降。
vite详解
热门推荐
weixin_47450807的博客
02-06 3万+
一、认识vite webpack是目前整个前端使用最多的构建工具，但是除了webpack之后也存在其他一些构建工具。比如说rollup,parcel,gulp,vite等等。vite的官方定位是下一代前端开发和构建工具。 如何定义下一代开发和构建工具呢？ 我们知道在实际开发中，我们在编写的代码往往是不能被浏览器直接识别的，比如ES6，TypeScript,Vue文件等。所以此时我们必须通过构建工具来对代码进行转换，编译，类似的工具有webpack,rollup,parcel.但是随着项目越来越大，需要处理的
下一代前端开发利器——Vite（原理源码解析）
奇舞周刊
03-03 1302
本文作者是360奇舞团前端开发工程师前言Hi，大家好！前段时间用Vue3搭建项目时看到同时推出的Vite，只当它是一个新打包工具或者vue-cli的升级版，仍然选择了用Webpack构建项...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

1024小神

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值