vite创建打包预览Vue3流程

        本文章只是走了一下创建====》运行===》打包===》预览打包效果的流程步骤,不包含创建后配置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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/73054.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【计算机视觉 | 目标检测】arxiv 计算机视觉关于目标检测的学术速递(8 月 8 日论文合集)

文章目录 一、检测相关(13篇)1.1 FSD V2: Improving Fully Sparse 3D Object Detection with Virtual Voxels1.2 Dimensionality Reduction for Improving Out-of-Distribution Detection in Medical Image Segmentation1.3 FeatEnHancer: Enhancing Hierarchical Features for…

如何显示virtualBox中的菜单栏

1.菜单栏未显示,如何显示? 2,按下ctrl(右边)HOME,弹出菜单,如下图所示:选择视图-菜单栏-显示菜单栏 3.OK:完成!

【深度学习 video detect】Towards High Performance Video Object Detection for Mobiles

文章目录 摘要IntroductionRevisiting Video Object Detection BaselinePractice for Mobiles Model Architecture for MobilesLight Flow 摘要 尽管在桌面GPU上取得了视频目标检测的最近成功,但其架构对于移动设备来说仍然过于沉重。目前尚不清楚在非常有限的计算…

福利!百度Workshop实战课,即刻搭建AI原生应用!| IDCF

你是否希望掌握大模型开发的秘诀?你是否渴望得到实践操作的机会?如果你的心中充满热情和期待,那么,WAVE SUMMIT 2023特别设置的Workshop将会是你的知识启航站! 本次Workshop专注于AI开发与大模型应用,邀请…

【Docker】个人镜像文件Dockerfile制作详解

前言 洁洁的个人主页 我就问你有没有发挥! 知行合一,志存高远。 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux或Windows操作系统的机器上,也可以实现虚拟化,容器是…

分布式链路追踪概述

分布式链路追踪概述 文章目录 分布式链路追踪概述1.分布式链路追踪概述1.1.什么是 Tracing1.2.为什么需要Distributed Tracing 2.Google Dapper2.1.Dapper的分布式跟踪2.1.1.跟踪树和span2.1.2.Annotation2.1.3.采样率 3.OpenTracing3.1.发展历史3.2.数据模型 4.java探针技术-j…

不同版本Idea部署Maven和Tomcat教学

目录 一、2019版Idea 1.1. Maven配置 1.2. Tomcat配置 二、2023版Idea 2.1 Maven配置 2.2. Tomcat配置 一、2019版Idea 1.1. Maven配置 在这篇 http://t.csdn.cn/oetKq 我已经详细讲述了Maven的下载安装及配置,本篇就直接开始实操 : 1. 首先进入设置搜索Mave…

每天一道leetcode:115. 不同的子序列(动态规划困难)

今日份题目: 给你两个字符串 s 和 t ,统计并返回在 s 的 子序列 中 t 出现的个数。 题目数据保证答案符合 32 位带符号整数范围。 示例1 输入:s "rabbbit", t "rabbit" 输出:3 解释: 如下所…

竞赛项目 深度学习验证码识别 - 机器视觉 python opencv

文章目录 0 前言1 项目简介2 验证码识别步骤2.1 灰度处理&二值化2.2 去除边框2.3 图像降噪2.4 字符切割2.5 识别 3 基于tensorflow的验证码识别3.1 数据集3.2 基于tf的神经网络训练代码 4 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 &#x…

vue3中用watch监听响应式数据的注意点

如果你在vue3中使用reactive()方法创建响应式数据,然后又用torefs()方法将响应式数据解构成单一的ref响应式数据。 此时,如果你想用watch监听解构出来单一的响应式数据,watch不起作用。 此时,你需要用watch监听之前的reactive()…

【金融量化】对企业进行估值的方法有哪些?

估值的方法有哪些? 如何对企业进行估值?有2个方法估算。 1 绝对估值法 它是一种定价模型,用于计算企业的内在价值。 比如说你可以根据公司近N年的现金流情况。借此去预测未来N年的现金流情况。所有的现金流数据都可以在年报上查询到。最后…

《TCP IP网络编程》第十六章

第 16 章 关于 I/O 流分离的其他内容 16.1 分离 I/O 流 「分离 I/O 流」是一种常用表达。有 I/O 工具可区分二者,无论采用哪种方法,都可以认为是分离了 I/O 流。 2次 I/O 流分离: 第一种是第 10 章的「TCP I/O 过程」分离。通 shutdown(soc…

【electron】electron安装过慢和打包报错:Unable to load file:

文章目录 一、安装过慢问题:二、打包报错:Unable to load file: 一、安装过慢问题: 一直处于安装过程 【解决】 #修改npm的配置文件 npm config edit#添加配置 electron_mirrorhttps://cdn.npm.taobao.org/dist/electron/二、打包报错:Unable to load…

在 Windows 上安装 OpenCV – C++ / Python

在这篇博文中,我们将在 Windows 上安装适用于 C 和 Python 的 OpenCV。 C 安装是在自定义安装 exe 文件的帮助下完成的。而Python的安装是通过Anaconda完成的。 在 Windows 上安装 OpenCV – C / Python(opencv官方Wndows上安装openCV- C/ Pthon 的链接…

SpringBoot复习:(43)如何以war包的形式运行SpringBoot程序

一、.pom.xml配置packging为war <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven…

Unity3D高级编程:主程手记学习1

第一章 软件架构 Untiy 分层设计 分层后再分治

zabbix监控mysql数据库、nginx、Tomcat

文章目录 一.zabbix监控mysql数据库1.环境规划2.zabbix-server安装部署&#xff08;192.168.198.17&#xff09;3.zabbix-mysql安装部署&#xff08;192.168.198.15&#xff09;3.1 部署 zabbix 客户端3.2 服务端验证 zabbix-agent2 的连通性&#xff08;192.168.198.17&#x…

人文景区有必要做VR云游吗?如何满足游客出行需求?

VR云游在旅游行业中的应用正在快速增长&#xff0c;为游客带来沉浸式体验的同时&#xff0c;也为文旅景区提供了新的营销方式。很多人说VR全景展示是虚假的&#xff0c;比不上真实的景区触感&#xff0c;人文景区真的有必要做VR云游吗&#xff1f;我的答案是很有必要。 如果你认…

python如何开发一个电商进销存管理系统?

让我们来看一下题主的需求&#xff1a; 管理公司的淘宝天猫平台&#xff0c;后端仓库&#xff0c;采购进行数据同步。其中最主要的还是要对接淘宝API &#xff0c;实现实时订单的通知&#xff0c;同步淘宝订单&#xff0c;管理买家信息&#xff0c;发货&#xff0c;财务统计等…

C语言三子棋小游戏--数组的应用

注&#xff1a;在最后面&#xff0c;完整源码会以两种形式展现。在讲解时&#xff0c;以三个源文件的形式。 前言&#xff1a;三子棋&#xff0c;顾名思义&#xff0c;就是三个子连在一起就可以胜出。在本节我们要介绍的三子棋模式是这样子的&#xff1a;在键盘输入坐标&#x…