vite创建打包预览Vue3流程

        本文章只是走了一下创建====》运行===》打包===》预览打包效果的流程步骤,不包含创建后配置vue3项目和打包优化等。

1.使用vite创建vue3项目

创建项目命令:

npm create vite@latest

写完项目名称后回车 

 键盘上下键选择Vue构建

 

根据项目需求选择ts还是js

 创建完成

 根据提示反向下载依赖

 默认使用npm run dev运行项目

npm run dev

 

效果:

 2.使用vite打包

平时我们习惯用npm run build打包,会出错哈,需要在package.json文件中改东西

 package.json文件:

原代码:

更改后的代码:

保存再运行

npm run build

 打包成功

 打包后项目目录多了个dist文件,里面就是打包后的结果了

3.预览打包后的效果

npm run preview

 页面一样就是端口号改变了

 4.主要命令

  1. 创建命令:npm init vite@latest
  2. 运行:npm run dev
  3. 打包:npm run build
  4. 预览:npm run preview

文章到此结束,希望对你有所帮助~

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值