新手Vite打包工具的使用并解决yarn create vite报错

news2024/9/29 9:58:03

一、手动创建

1.创建vite-Demo文件夹

2.初始化

yarn init -y

3.安装vite

 yarn add -D vite

4.打包准备

说明:不需要在src下面创建,在vite-Demo文件夹创建

4.1index.js文件

document.body.insertAdjacentHTML("beforeend","<h1>你好vite</h1>")

4.2index.html文件 

说明: <script type="module" src="./index.js"></script>中module很关键。浏览器以 ES 模块的方式加载 JavaScript 文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module" src="./index.js"></script>
</head>
<body>
    
</body>
</html>

5.打包

说明:相当于运行在服务器,实际没有打包

 yarn vite

 

 6.构建

说明:因为 build 命令会生成优化和压缩后的静态文件,而不是一个开发服务器。要查看打包后的效果,你需要将生成的静态文件部署到一个 Web 服务器上,然后通过浏览器访问部署后的应用程序。

yarn vite build

 

7.预览

说明:预览打包后的代码,可以解决本地查看构建效果,不用放在服务器

yarn vite preview 

 

二、 一键式启动

1.命令

yarn create vite

 说明:但是报错。

2.解决问题

说明:执行下面代码,查看是否在同一个盘符。我这很明显不是

 yarn global dir

 yarn global bin

 解决:

说明:路径就是安装node位置的地方

yarn config set global-folder "D:\universal\nvm\v16.20.1\node_global"

yarn config set prefix "D:\universal\nvm\v16.20.1\node_cache"

 再次查看

完美结局 

3. 输入项目名称

 4.本人输入的是vite_demo2

 5.选择Vanilla

说明:Vanilla 通常用来指代原始的、未经框架或库封装的纯粹的编程语言或技术。也就是JavaScript。

6.选择JavaScript

 7.创建成功

 

 

 

 

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MySQL函数(二十五)

二八佳人体似酥&#xff0c;腰悬利剑斩愚夫&#xff0c;虽然不见人头落,暗里教君骨髓枯。 上一章简单介绍了 MySQL存储过程(二十四),如果没有看过,请观看上一章 前面学习了很多函数&#xff0c;使用这些函数可以对数据进行的各种处理操作&#xff0c;极大地提高用户对数据库的…

Linux(三):Linux服务器下日常实操命令 (常年更新)

基础命令 cd命令&#xff1a;切换目录 cd &#xff1a;切换当前目录百至其它目录&#xff0c;比如进入/etc目录&#xff0c;则执行 cd /etccd / &#xff1a;在Linux 系统中斜杠“/”表示的是根目录。cd / ,即进入根目录.cd ~&#xff1a;进入用户在该系统的home目录&#…

小程序商品如何设置限购

限购是一种常用的小程序商品销售策略&#xff0c;可以帮助商家提高销售额、控制库存和增加用户的购买欲望。那么&#xff0c;小程序产品怎么设置限购呢&#xff1f;下面将为您详细介绍。 1. 设置限购数量 可以设置最低购买数量来鼓励用户批量购买或满足特定的销售需求。例如&…

为什么大多数团队推行自动化测试最后却不了了之?

随着软件行业的快速发展&#xff0c;接口测试用例在软件开发中扮演着越来越重要的角色。自动化测试作为软件测试的一个重要分支&#xff0c;一般可以提高测试效率和质量&#xff0c;节约测试成本和时间&#xff0c;但是在实际推行过程中&#xff0c;大多数团队最终却难以持续实…

在word的文本框内使用Endnote引用文献,如何保证引文编号按照上下文排序

问题 如下图所示&#xff0c;我在word中插入了一个文本框&#xff08;为了插图&#xff09;&#xff0c;然后文本框内有引用&#xff0c;结果endnote自动将文本框内的引用优先排序&#xff0c;变成文献[1]了&#xff0c;而事实上应该是[31]。请问如何能让文本框内的排序也自动…

[CKA]考试之持久化存储卷PersistentVolume

由于最新的CKA考试改版&#xff0c;不允许存储书签&#xff0c;本博客致力怎么一步步从官网把答案找到&#xff0c;如何修改把题做对&#xff0c;下面开始我们的 CKA之旅 题目为&#xff1a; Task 创建一个pv&#xff0c;名字为app-config&#xff0c;大小为2Gi&#xff0c;…

数据结构初阶--二叉树的顺序结构之堆

目录 一.堆的概念及结构 1.1.堆的概念 1.2.堆的存储结构 二.堆的功能实现 2.1.堆的定义 2.2.堆的初始化 2.3.堆的销毁 2.4.堆的打印 2.5.堆的插入 向上调整算法 堆的插入 2.6.堆的删除 向下调整算法 堆的删除 2.7.堆的取堆顶元素 2.8.堆的判空 2.9.堆的求堆的…

PyMol选择配体周围的氨基酸残基

PyMOL选择配体周围的氨基酸残基 1. 问题 经常使用PyMOL做蛋白质和小分子的可视化&#xff0c;可以直接生成用于文章发表的高质量图片&#xff0c;图片生成可参考pymol作图 等教程。但是&#xff0c;用了这么久一直没发现可以直接用于选择配体周围一定距离氨基酸残基的功能。 …

Java阶段五Day17

Java阶段五Day17 文章目录 Java阶段五Day17师傅后台功能师傅审核列表相关功能启动进程和启动方式 后台审核详情查询查询审核详情流程远程调用图片服务 缓存逻辑缓存逻辑流程查询引入缓存流程完成缓存逻辑面试题整理 附录redis分布式——架构演变 师傅后台功能 师傅审核列表 相…

熟练掌握ChatGPT解决复杂问题——学会提问

目录 引言 一、5W1H分析法 1. 简单的问题&#xff08;what、where、when、who&#xff09; 2.复杂的问题&#xff08;why、how&#xff09; 2.1 为什么&#xff08;Why&#xff09;——原因 2.2 方式 &#xff08;How&#xff09;——如何 二、如何提问得到更高质量的答案…

mysql按照日期分组统计数据

目录 前言按天统计按周统计按月统计按年统计date_format参数 前言 mysql的date_format函数想必大家都使用过吧&#xff0c;一般用于日期时间转化 # 例如 select DATE_FORMAT(2023-01-01 08:30:50,%Y-%m-%d %H:%i:%s) # 可以得出 2023-01-01 08:30:50# 或者是 select DATE_FOR…

python中*与**的使用

文章目录 前言一、*与**在函数定义时二、*与**在函数调用时 前言 在python中*与**的使用要区分是在函数定义时还是在函数调用时。 一、*与**在函数定义时 def deng(*args,**kwargs):print(args)print(kwargs)deng(1,2,3,a 4,b 5)在函数定义时参数前面使用*&#xff0c;代表…

面试必考精华版Leetcode872. 叶子相似的树

题目&#xff1a; 代码&#xff08;首刷看解析 day23&#xff09;&#xff1a; class Solution { public:void dfs(TreeNode* root,vector<int>& seq){if(!root->left&&!root->right){seq.emplace_back(root->val);}else{if(root->left){dfs(ro…

java讲解Spring Boot配置文件级别 相互覆盖关系 解决一方不愿意给数据库密码 一方不愿意给源码时 数据库配置问题

前面 我们讲过Spring Boot 修改临时变量的方式 但另一个场景 就是 我们 在本地开发环境 用的是一个配置 但如果项目经理上线 他想改这些配置 怎么弄呢 特别是数据库之类的配置 很多线上是不太一样的 那么 我们先看一个比较基本的方法 在配置文件的同目录下创建一个目录 叫 con…

Sketch打不开AI文件?转换方法在这里

1、对比设计软件 Sketch 与 AI 软件功能 Sketch 与 Illustrator 都是行业内优秀的矢量图形设计软件&#xff0c;各有千秋。Sketch 从 2010 年面世&#xff0c;专注 APP 界面设计&#xff0c;深受初学者与专业人士喜爱。Illustrator 拥有更悠久的历史&#xff0c;是处理复杂图标…

好用的数据库管理软件之idea(idea也有数据库???)

1.建立maven项目&#xff08;maven项目添加依赖&#xff0c;对于后期连接数据库很方便&#xff09; 2.连接数据库。。。 这里一定注意端口号&#xff0c;不要搞错了 和上一张图片不一样哦 3.数据库测试代码。。。 然后你就可以在这里边写MySQL代码了&#xff0c;这个工具对于新…

线程概念linux

何为线程&#xff1a; 线程是程序中负责执行的单位&#xff0c;它可以被看作是进程的一部分&#xff0c;是进程的子任务。线程与进程的区别在于&#xff0c;进程是一个资源单位&#xff0c;而线程是进程的一部分&#xff0c;它只有栈这个独立的资源&#xff0c;其他资源如代码…

Html页面连线工具

在项目中遇了一个需要连线配置的功能。该功能引用了 bootstrap、layui 、svg-line等插件 下载链接 lixhttps://download.csdn.net/download/dongyan3595/88168121

SpringBoot使用redis作为缓存的实例

目录 什么是缓存&#xff1f; 缓存的作用&#xff1f; 缓存的成本&#xff1f; 实际项目中的应用 代码展示 什么是缓存&#xff1f; 缓存就是数据交换的缓冲区&#xff08;称作Cache [ kʃ ] &#xff09;&#xff0c;是存贮数据的临时地方&#xff0c;一般读写性能较高。 缓…

持续集成这样做,App自动化测试效率提高50%

持续集成是一种开发实践&#xff0c;它倡导团队成员需要频繁的集成他们的工作&#xff0c;每次集成都通过自动化构建&#xff08;包括编译、构建、自动化测试&#xff09;来验证&#xff0c;从而尽快地发现集成中的错误。让正在开发的软件始终处于可工作状态&#xff0c;让产品…