vite创建打包预览Vue3流程

news/2025/2/11 13:57:47/

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

1.使用vite创建vue3项目

创建项目命令:

npm init 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

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


http://www.ppmy.cn/news/1032955.html

相关文章

pytest数据驱动 pandas

pytest数据驱动 pandas 主要过程:用pandas读取excel里面的数据,然后进行百度查询,并断言 pf pd.read_excel(data_py.xlsx, usecols[1,2])print(pf.values)输出:[[‘听妈妈的话’ ‘周杰伦’] [‘遇见’ ‘孙燕姿’] [‘伤心太平…

Springboot 实践(2)MyEclipse2019创建项目修改pom文件,加载springboot 及swagger-ui jar包

MyEclipse2019创建工程之后,需要添加Springboot启动函数、添加application.yml配置文件、修改pom文件添加项目使用的jar包。 添加Springboot启动函数 创建文件存储路径 (1)右键单击“src/main/java”文件夹,弹出对话框输入路径…

QT:UI控件(按设计师界面导航界面排序)

基础部分 创建新项目:QWidget,QMainWindow,QDialog QMainWindow继承自QWidget,多了菜单栏; QDialog继承自QWidget,多了对话框 QMainWindow 菜单栏和工具栏: Bar: 菜单栏:QMenuBar&#xff0…

Nginx网站服务(安装nginx、平滑升级nginx、nginx各种访问配置)

一、Nginx概述 1、什么是nginx? 稳定性高、系统资源消耗低、对HTTP并发连接的处理能力高(单台物理器可支持30000-50000个并发请求) NG并发连接能力有2个因素的影响 ①CPU的个数 ②本地吴立琪系统的最大文件打开数2、Nginx应用场景 静态服…

CSS自学框架之表单

首先我们看一下表单样式,下面共有5张截图 一、CSS代码 /*表单*/fieldset{border: none;margin-bottom: 2em;}fieldset > *{ margin-bottom: 1em }fieldset:last-child{ margin-bottom: 0 }fieldset legend{ margin: 0 0 1em }/* legend标签是CSS中用于定义…

react入门到实战 学习笔记1 搭建

一、React是什么 一个专注于构建用户界面的 JavaScript 库,和vue和angular并称前端三大框架 React有什么特点 1- 声明式UI(JSX) 写UI就和写普通的HTML一样,抛弃命令式的繁琐实现 2- 组件化 组件是react中最重要的内容&#xf…

K8S系列四:服务管理

写在前面 本文是K8S系列第四篇,主要面向对k8s新手同学。阅读本文需要读者对k8s的基本概念,比如Pod、Deployment、Service、Namespace等基础概念有所了解,尚且不了解的同学推荐先阅读本系列的第一篇文章《K8S系列一:概念入门》[1]…

昨天被喷的体无完肤

昨天尝试去面试,结果被问到特别底层的原理,发现答出来还是不如意。 平时也是一些库一些网络,就是会用,然后理解了一些原理,但是太深得就没有追究了,所以还是需要看一些底层的源码,努力去理解大神…