用 vite 快速构建 vue 项目

最新推荐文章于 2025-04-14 17:26:21 发布
最新推荐文章于 2025-04-14 17:26:21 发布
阅读量314 收藏
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Asurfacehero/article/details/126708828
版权
这篇博客介绍了如何在Node.js环境下，利用npm初始化并搭建Vite项目。通过运行`npm init vite@latest`命令，可以快速创建一个基于Vite的最新项目。接着，在VSCode中安装必要的依赖，完成项目的配置。文章详细阐述了Vite在前端开发中的应用和优势。

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

Vite

node -v ---- v16.17.0

通过 npm 初始化 vite 项目

npm init vite@late@lastest
请添加图片描述

在 vscode 中通过 npm install 安装依赖
请添加图片描述

Asurfacehero
关注
vue初学：安装使用（2）——使用Vite快速构建Vue项目
m0_46610349的博客
09-01 882
vue初学：安装使用（2）——使用Vite快速构建Vue项目
使用vite快速搭建vue3项目
weixin_63776631的博客
04-23 1048
vite是一个现代化的前端构建工具，它旨在提供快速的开发体验和优化的构建性能。vite基于ES模块的原生浏览器支持，利用现代浏览器的特性来实现快速的热更新和构建。它支持Vue、React、Svelte等框架，并提供了丰富的插件系统和开箱即用的特性，使开发者能够更高效地构建现代化的Web应用程序。（当然在在vite的官方文档中你可以看到更具体的介绍）
vite项目怎么build打包成不同环境的代码？从而适配不同环境api接口
这是一个web全栈开发的博客，取其精华去其糟粕，争取让大家一看就懂，一学就会，一用就成~
05-24 1159
在开发 Web 应用的过程中，我们需要在不同的环境中运行和测试我们的应用程序（如开发环境、测试环境和生产环境）。每个环境都有其特定的 API 接口和配置。Vite，一个基于 ESBuild 的前端构建工具，可以帮助我们实现这个需求。vite 配置官方文档：点击其实 vite 打包的时候，主要是根据不同的环境来生成不同的打包文件的，所以不同的环境是怎么区分呢？默认情况下，开发服务器 (dev命令) 运行在(开发) 模式，而build命令则运行在production。
Vite学习之模式
悦涵仙子的技术笔记本
11-01 1557
NODE_ENV=…可以在命令中设置，也可以在 .env 文件中设置。在某些情况下，若想在 vite build 时运行不同的模式来渲染不同的标题，你可以通过传递 --mode 选项标志来覆盖命令使用的默认模式。npx rimraf node_modules 这个命令是在使用 Node.js 开发时，用于删除项目中的 node_modules 文件夹的命令。使用 Node.js 运行 Vite 的构建命令，并手动设置 Node.js 的老生代内存限制为 8 GB，以确保在构建大型项目时有足够的内存可用。
VUE项目中的package.json中的启动脚本
最新发布
qq_39666711的博客
04-14 353
vite build和都是 Vite 构建工具的内置功能，前者是默认的生产环境构建命令，后者则允许你通过指定环境模式，灵活地为不同环境进行针对性的构建。
vue3+vite前端搭建初步入门
做GIS梦的人
04-20 3174
vue2+webpack用了几年时间了，现在vue3越来越火，据说vite的打包速度非常快，这里就记录一下vue3+vite的一些简单的入门内容 项目创建 项目创建也是通过npm命令就可以了 npm init vite-app demo #demo是项目名 #跳转到项目的根目录，然后install npm install # 本地运行 npm run dev 这样项目就创建好了 必备工具 eventBus不能用的解决方案 用习惯vue的人，肯定经常使用eventBus。在刚刚创建的项目中
Vite的环境变量
Java精灵
03-21 3863
Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。
vite配置多环境打包
博哥的二进制世界
04-02 1万+
背景 在项目打包的时候，我们通常需要根据环境变量来区分不同的环境，以请求不同的后台接口 vite配置多环境打包 首先看vite官网介绍的方法 那么我们在项目的根目录下创建如下的环境配置文件，以uat为例，在项目根目录下创建.env.uat,并新增环境变量VITE_PROJECT_ENV = ‘uat’,需要注意的是，环境变量必须以VITE开头, package.json中配置uat环境的打包命令，在vite build后加上- -mode uat来区分打包环境 之后在项目中即可通过以下方式获取到配置的
Vue 基于vite构建vue3项目 以及基础语法演示
07-17
Vue 基于vite构建vue3项目 以及基础语法演示Vue 基于vite构建vue3项目 以及基础语法演示Vue 基于vite构建vue3项目 以及基础语法演示Vue 基于vite构建vue3项目 以及基础语法演示Vue 基于vite构建vue3项目 以及基础...
使用Vite快速构建Vue项目并集成Vue Router、Pinia和Vant
资源摘要信息:"本文主要介绍如何通过Vite构建Vue项目，并在其中集成Vue Router、Pinia和Vant UI库，以实现一个完整的前端开发环境。" 知识点: 1. Vite基础和特性 Vite是一个现代化的前端构建工具，它利用了ESM...
如何使用Vite构建vue项目
m0_74825223的博客
12-21 1768
由3部分组成：template 写html代码、script js脚本vue3+ setup语法方式、style css样式，scoped限定只在本片段中生效，每个组件都应该有一个清晰的职责和数据流，没有顺序关系。
手写VUE后台管理系统9 - 多环境配置
死牛胖子的技术随笔
12-11 269
从零开始手写VUE后台管理系统，多环境配置
VUE3 学习笔记（四）彻底搞懂vite 环境变量
sensor_WU 博客
03-23 6796
env # 所有情况下都会加载.env.local # 所有情况下都会加载，但会被 git 忽略.env.[mode] # 只在指定模式下加载.env.[mode].local # 只在指定模式下加载，但会被 git 忽略注意，上面这些是文件名，其中方括号[mode]是指当前构建模式，比如：development表示开发环境，production表示生产环境。注意：以上文件默认情况下一定要和 vite.config.ts 配置文件放在同一个目录，否则将导致无法加载到环境变量。
vite开发的项目如何打包build不同环境的代码？适配不同环境api接口
05-10 1156
其实vite打包的时候，主要是根据不同的环境来生成不同的打包文件的，所以不同的环境是怎么区分呢？默认情况下，开发服务器 (dev命令) 运行在(开发) 模式，而build命令则运行在production(生产) 模式，也就是在package.json里面的命令：这意味着当执行vite build时，它会自动加载在你的应用中，你可以使用渲染标题。在某些情况下，若想在vite build时运行不同的模式来渲染不同的标题，你可以通过传递--mode选项标志来覆盖命令使用的默认模式。还需要新建一个由于。
vue给不同环境配置不同打包命令
dogface博客
05-27 2822
VUE给不同环境处理不同的打包命令，用环境变量去处理不同接口进行测试和发布（如开发环境、测试环境，正式环境等） 1.新建.env文件; .env 全局默认配置文件，不论什么环境都会加载合并 .env.development 开发环境下的配置文件 .env.test 测试环境下的配置文件 .env.production 生产环境下的配置文件 2.环境变量配置 VITE_APP_SERVER_NAME="user" VITE_APP_SERVER_ID=1 VITE_APP_API = "ht
四，vite开发环境、生产环境配置
热门推荐
blue_121的博客
06-15 1万+
一个项目可能会有开发版本、上线版本、测试版本等等多个版本，不同的环境会有不同请求api接口，就需更改一些基本配置，这时候就显得很麻烦，所以这里就使用了环境变量。我们只需做简单的配置，把环境状态切换的工作交给代码。
vite打包时通过.env在不同的模式下传递不同环境变量数据
SunFlower914的博客
01-30 2785
要在打包过程中，根据不通模式获取到不同的环境变量值，需要通过--mode选项标志来覆盖命令使用的默认模式，比如开发环境/测试环境/生产环境都对应不同的标题： 1. 先在项目根目录下创建三个.env文件对应三个环境变量； 2. 在package.json文件中scripts内传递 --mode 选项标志来覆盖命令使用的默认模式； 3. 使用const uploadFileUrl = ref(import.meta.env.VITE_APP_TITLE)
vue3.x+ts+vite2环境变量配置
网站前端/PHP/Android/其他
04-21 1587
在做项目环境变量配置前，可以先到官网回忆一下环境变量的基本使用，https://cn.vitejs.dev/guide/env-and-mode.html 一、环境模式 首先环境变量是可以分模式的，常用模式如下： .env # 所有情况下都会加载 .env.local # 所有情况下都会加载，但会被 git 忽略 .env.[mode] # 只在指定模式下加载 .env.[mode].local # 只在指定模式下加载，但会被 git 忽略
记录转载：Vite多环境配置--让项目拥有更高定制化能力
林恒的博客
06-09 895
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 业务背景 近些年来，随着前端工程架构发展，使得前端项目中也能拥有如后端工程的模块能力。正所谓 “能力(越)越大(来)，责任(越)越大(卷)”，现在的前端工程不仅仅要满足业务需求，还伴随更多复杂的环境适配问题，例如： 1.api请求的域名会根据不同环境而不同； 2.线上环境和测试环境在打包策略有所不同「如线上要隔离sourceMap...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值