新建vite项目，从安装到打包

已于 2022-07-20 10:19:36 修改
阅读量565 收藏
点赞数
分类专栏： vue 前端 文章标签： vue.js
于 2022-07-17 19:19:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/k54kdk/article/details/125835598
版权

新建文件夹v00

cd到指定路径

执行命令，新建项目

cd到项目目录proj1，打包发布项目

在dist目录下查看index文件，发现空白

修改proj1\vite.config.js文件，添加base:'./'

重新打包

规范的vue项目结构

k54kdk
关注
专栏目录
创建vite项目
weixin_45286326的博客
05-06 831
创建项目
创建vite项目全流程
bestyinjun的专栏
08-04 2854
创建vite项目全流程，router、vuex、axios、eslint
【vite】搭建完整项目流程、项目配置
最新发布
amoureux555的博客
09-29 1193
【vite】搭建完整项目流程、项目配置
使用Vite创建一个项目
qq_39833142的博客
07-27 669
版本>=12.0.0。然后按照提示操作即可！
完整创建一个vite前端项目
m0_63624484的博客
07-21 1402
废话少说，直接上步骤！
vite搭建完整项目
热门推荐
H524268015wsw的博客
06-05 1万+
（4）cd + 项目名称 进入 npm install初始化，简写（npm i） 最后 npm run dev。（2）在src/assets文件夹下新建，scss文件夹(文件名称随意)，在文件夹下新建main.scss文件。（1）点击链接进入，选择使用安装命令。（2）输入命令后，回车，输入项目名称，昵称随意，我这里用的是 viteprojects，回车。（1）点击上方网址，进入vite官网，选择一个命令安装方式。（3）在vite.config.js文件中添加配置。（1）在项目终端中输入面的命令。
Vite项目打包优化
qq_42717015的博客
03-21 1254
Vite项目打包优化
vue+vite+宝塔 项目打包上线云服务器详细过程（含echarts数据请求跨域问题）
weixin_52084329的博客
11-26 1792
又是心情异常复杂的一篇文章，但是万事开头难，还是超级开心啊哈哈哈哈哈哈哈！这是自己写的一个小项目，基于vite创建，包含了echarts调用api请求数据，所以里面涉及到了跨域问题困扰了我很久！
vite打包配置
u013195452的专栏
04-29 591
vite基本配置
Vite【二】使用vite创建项目
小祥编程擅长前端
02-03 1985
Vite【二】使用vite创建项目。vite（法语意为 “快速的”，发音/vit/，发音同 “veet”) 是一种新型前端构建工具，能够显著提升前端开发体验。vite比webpack打包工具启动速度快、热更新快，vite使用esbuild（Go编写）预构建依赖，而webpack基于node.js,因此vite比webpack快10~100倍。
创建Vite项目
QWERTY55555的专栏
10-30 438
-- package-lock.json: 用于记录实际安装的各个包的具体来源和版本号等,其他人在 npm install 项目时大家的 依赖能保证一致。|-- tsconfig.config.json: TypeScript 相关配置文件（在tsconfig.json中被引用了）| |-- extensions.json |-- node_modules: 存放下载依赖的文件夹。| |-- assets: 静态文件，会进行编译压缩，如css/js/图标等。| |-- App.vue: 应用根主组件。
通过vite创建项目
m0_74356429的博客
04-03 2650
1.安装vite: npm install -g vite@latest2.创建项目： npm init vite@latest 项目名称 -- --template vue-ts3. cd 到项目目录之后运行。
搭建vite项目
regretTAT的博客
03-25 1085
npm create vite@latest yarn create vite yarn create vite my-vue-app --template vue … 页面结构 ↓↓↓ 3. 在 src/main.js 中，导入并使用刚刚创建的路由 4. 在 src/App.vue 中，添加一个 router-view 组件来显示当前路由的内容 …
vite项目的创建
T01A98O的博客
03-13 162
然后根据提示，cd到项目目录，再npm install安装依赖，vite要自己进行安装一下依赖，不然会报错误。最后直接npm run dev就可以跑起来了。vite创建项目跟vue步骤差不多。
创建vite的项目
jianggeye7485的博客
08-17 1217
一、创建vite的项目 按照顺序执行命令，即可基于vite创建vue 3.x的工程化项目： npm init vite-app 项目名称 cd 项目名称 npm install npm run dev ①创建项目 运行npm init vite-app sv01 ②安装依赖包 cd sv01 npm install 简写npm i ③运行vue3 npm run dev 二、项目的目录结构 src中项目源代码目录： 3、vite项目的运行流程 在项目中，vue只要做：通过main.js
vite创建项目
qq_15806553的博客
12-11 6363
vite创建项目
创建基于 Vite 的新项目
wangyining070205的博客
10-02 2748
前些日子学习安装了Vue- CLI，现在官方推荐使用 create-vue 来创建基于 Vite 的新项目。试着安装了一下，感觉更简单了。
vite创建的项目怎么打包
09-14
1. 首先，确保在你的Vite项目根目录下安装了Webpack和相关的插件，可以通过运行`npm install webpack webpack-cli --save-dev`来安装。 2. 接下来，创建一个Webpack的配置文件（通常是`webpack.config.js`），并在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

k54kdk

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

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

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

打赏作者

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

抵扣说明：

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

余额充值