Vue3的构建工具Vite使用

最新推荐文章于 2025-04-18 16:21:37 发布

姥姥家的饭

最新推荐文章于 2025-04-18 16:21:37 发布

阅读量413

点赞数

分类专栏： vue js typescript

本文链接：https://blog.youkuaiyun.com/qq_41950190/article/details/114291033

版权

vue 同时被 3 个专栏收录

35 篇文章

订阅专栏

16 篇文章

订阅专栏

typescript

7 篇文章

订阅专栏

本文介绍了一个新的打包工具Vite，该工具由Vue的作者推出，旨在替代Webpack。文章提供了使用npm和yarn进行项目初始化、安装依赖、启动开发服务器及构建发布的详细步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vite是vue作者推出的打包工具，意图替换掉wabpack

// 初始化：
npm init vite-app vite_test
cd vite_test
npm install

运行：
npm run dev

发布：
npm run build

如果是yarn，则相应的命令是

yarn create vite-app vite_test
cd vite_test
yarn
yarn dev

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

姥姥家的饭

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue3通透教程【二】更高效的构建工具—Vite

官方推荐

02-06

6万+

为大家介绍新一款的构建工具——Vite，当然我们Vite更多的是被用于开发阶段，下面也为大家介绍到了 Vite 想比于 webpack 编译中的优势，以及Vite构建Vue3项目的步骤教程，赶快跟着我尝试一下吧！

【Vue3】使用Vite构建工具构建Vue3项目

早睡早起长头发的博客

08-17

6794

一、利用cmd和vscode创建二、利用webstorm创建

参与评论您还未登录，请先登录后发表或查看评论

Vue3 构建工具（Vite）

Flying_Fish_roe的博客

01-13

2054

Vite是一个基于原生ES模块的前端构建工具，旨在提供极速的开发服务器启动时间和高效的热模块替换（HMR）体验。它利用现代浏览器的原生能力，结合Rollup进行生产环境的优化构建。Vite的插件系统基于Rollup的插件API，允许开发者根据需求创建自定义插件。示例：创建一个简单的Vite插件return {${return {} , };`);},使用自定义插件});Vite的插件系统基于Rollup的插件API，允许开发者根据需求创建自定义插件，扩展Vite的功能。

Vite-Vue3构建工具

chenhaiy的博客

03-24

1427

Vite-Vue3构建工具 Vite是Vue3.0新增的构建工具，目前仅支持Vue3.0。 1.创建项目 npm init vite-app myvitedemo cd myvitedemo npm install npm run dev 执行过程如下： D:\>npm init vite-app myvitedemo Need to install the following packages: create-vite-app Ok to proceed? (y) npm WARN

package.json 里面出现 workspace:*，关于工作区的解释

最新发布

lotpyve的博客

04-18

1103

这里我说明一下，这里没有专门配置到哪个工作区，vue 项目寻找的时候，应该是当前目录没有找到，然后又跳到父级目录去找，之后找到的，关于 workspace 还有一些配置，大家自己去研究了，这里做一个简单的演示。当package.json 里面出现 workspace:*，一般用的是 MonoRepo 策略，关于这个策略，懂的就懂，不懂的也可以继续看下去，能理解 workspace:* 的。此时，vue 的 App.vue 和 vue 里面的 package.json 是这样的。启动 vue 项目，

VUE 3——3：脚手架构建工具介绍及在创建 Vue 3 项目中的应用

dangfulin的博客

04-14

4039

这是针对 Vue 新人的一个简单指导。在前面的文章中，我们不推荐新手直接使用 vue-cli，（尤其是在还不熟悉基于 node.js 的构建工具时），而是通过直接引用的方式： <script src="https://unpkg.com/vue@next"></script> 随着页面中组件越写越多，单个 HTML 文件终究无法完成实际的整个 Vue 项目，同时为了对 Vue 的使用有个整体的了解，这里将展示如何通过脚手架工具创建 Vue 3 项目以及一些前置说明。文章目录一，

Vue3 -vite打包

一个努力搬砖的前端开发

09-20

836

你可以在 Node.js 官网 https://nodejs.org/ 下载最新版本的 Node.js 安装包。你可以在 Node.js 官网 https://nodejs.org/ 下载最新版本的 Node.js 安装包。此时你就可以在浏览器中访问 http://localhost:3000 来查看你的 Vue 3 项目了。此时你就可以在浏览器中访问 http://localhost:3000 来查看你的 Vue 3 项目了。以上就是在 Vite 中搭建 Vue 3 项目的步骤，希望对你有帮助！

vue3 + vite5 + typescript + element-plus 构建的后台管理前端模板的 vue3 版本

04-02

Vite5 是由 Vue.js 作者尤雨溪开发的新型前端构建工具，它摒弃了传统的 Webpack 架构，利用了 ES 模块的原生导入功能，实现了更快的热更新和更快的项目启动速度。Vite5 提供了更简单的配置，同时集成了 Rollup，使得...

vite2 + vue3构建多页应用-源码demo

10-15

Vue3 提供了更加高效、模块化和可扩展的组件系统，而Vite2则是一款由Vue.js作者尤雨溪开发的新型构建工具，它利用了ES模块的原生加载能力，大大提升了开发时的性能。本项目“vite2 + vue3构建多页应用-源码demo”将...

【VUE】vue3+vite项目打包优化

newbalsh的博客

11-29

7368

这几套组合拳打过去，项目体积不小也难，配置过程需要注意配置项位置，有时候配置好了没有效果可以去插件文档里检查下是否放错了位置。

Vue3 更高效的构建工具——Vite

程序员柒的博客

02-10

1万+

本文讲解了构建工具 Vite，目前只有vue3才可以使用Vite，如果本文对你有所帮助请三连支持博主。下面案例可供参考Vite是一种面向现代浏览器的一个更轻、更快的前端构建工具，能够显著提升前端的开发体验。除了Vite外，前端著名的构建工具还有Webpack和Gulp。目前，Vite已经发布了Vite2，Vite全新的插件架构、丝滑的开发体验，可以和Vue3的完美结合。

Vue 3 + Vite 多项目多 dist 打包操作指南

paper_umbrella的博客

06-25

6138

vue3打包，多个子项目分开打包

【Parcel 2 + Vue 3】从0到1搭建一款极快，零配置的Vue3项目构建工具

主要领域：前端开发

03-30

2310

前言一周时间，没见了，大家有没有想我啊！哈哈！我知道肯定会有的。言归正传，我们切入正题。上一篇文章中我主要介绍了使用Vite2+Vue3+Ts如何更快的入手项目。那么，今天我将会带领大家认识一个新的Vue3项目构建工具——parcel-vue-cli。这是什么？怎么以前没有听说过。有这样的疑问其实并不奇怪，因为这个构建工具是我自己开发的。你可能会这样问：“你自己开发的？这么厉害吗”？是的，豆哥其实就这么厉害。开玩笑啦！其实没有你想得那么厉害。都是搬砖人，主要看思路。好，不扯了！本篇文章我将带大家如何从0到

Vue3+vite打包配置及部分打包优化~

m0_62626838的博客

08-10

6021

1、步骤一：配置base。这里配置base主要是修改根路径，一般我们在开发环境中引用静态资源可能使用的是绝对路径，但是一旦打包部署到服务器上后可能会报404,无法正确的获取的资源。2、步骤二：可根据需要配置组件及静态资源路径别名（若配置了路径别名使用方法和typescript的类型别名一样，直接替换原路径即可）这里介绍的是vite项目的打包配置，若想了解webpack打包配置可看我的其他博客。（下面来介绍下vite打包配置的步骤）3、步骤三：配置生产环境移除console.log。

创建Vue3项目(vue-cli，vite，create-vue)

umin_的博客

08-08

8156

记录一下vue3搭建项目的几种方法（vue-cli，vite，create-vue）更推荐vite安装，如果几种方法都尝试过的小伙伴应该会发现vite安装更加的快速推荐pnpm和yarn包管理器，安装速度杠杠的，可以学习一下。

vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）