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

已于 2023-08-04 20:32:31 修改
阅读量1k 收藏
点赞数 1
分类专栏： 前端打包工具 文章标签： 前端
于 2023-08-04 19:08:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62785037/article/details/132109921
版权

一、手动创建

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.创建成功

 

 

 

 

 

 

FOREVER-Q
关注
专栏目录
vue3+vite - 打包构建报错Top-level await is not available in the configured target environment (“chrome87“,
高级前端工程师
05-18 3017
vue3，vite，Top-level await，build，打包构建，报错，npm run build，vite-plugin-top-level-await，vue3+vite打包报错，vue3 vite项目build打包出错，无法打包，Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 ove
Vue3通透教程【二】更高效的构建工具—Vite
热门推荐
官方推荐
02-06 6万+
为大家介绍新一款的构建工具——Vite，当然我们Vite更多的是被用于开发阶段，下面也为大家介绍到了 Vite 想比于 webpack 编译中的优势，以及Vite构建Vue3项目的步骤教程，赶快跟着我尝试一下吧！
vite—打包常见问题
m0_37616866的博客
12-15 6430
问题：打包时使用ts校验报错，原因是代码不符合ts校验规范 解决方案： 1. 关闭ts打包校验, 关闭vue-tsc ，修改package.json 2. 修改不符合ts规范的代码, vsCode中划横线的代码 // 方案一 "scripts": { "dev": "vite", // "build": "vue-tsc --noEmit && vite build", "build": "vite build", "serve": "vite prev.
yarn创建vite项目时报错【文件名、目录名或卷标语法不正确等】
最新发布
a3212768093的博客
10-14 244
yarn创建vite项目时报错【文件名、目录名或卷标语法不正确等】
vite打包遇到的错误
weixin_45041493的博客
08-20 537
2.将package.json中的bulid后面写成“vue-tsc --noEmit --skipLibCheck && vite build”
vite 项目打包时出错
虎康的博客
03-17 4163
文件 package.json 中的 build ， 从。是因为这个vue-tsc打包对ts进行了类型检查，, 解决打包过程中语法检测。关闭打包时的语法检测。
yarn create vite 报错：文件名、目录名或卷标语法不正确
D885855的博客
08-09 485
在搭建第一个 Vite 项目时，命令行报错：The filename, directory name, or volume label syntax is incorrect. （文件名、目录名或卷标语法不正确）
解决使用yarn-通过vite创建vue3项目失败-文件夹或目录不正确
最佳嫌疑人David_shag的博客
11-05 2750
在Nodejs下载完之后要都有可能出现权限受限的问题，可以看一下自己的文件夹权限是否足够，在nodejs安装目录下一般新建的文件夹操作权限都是不够的需要手动配一下。
走进“yarn create vite”的源码学习
小王的技术库
12-17 176
写这篇文章的原因1.最近在做一些工程化相关的内容，有使用到, 查看Node.js文档发现讲的就那么回事吧！所以这里详细整理下,并且记得之前在Linux下直接使用命令创建软链通过在想这两个参数位置有些怎么不一致呢？2.本文是我上一篇完整工程化系列文章中的一个小插曲,上篇文章 有提到软链接，那篇没有对软硬链接没有进行详细讲解，只是简单介绍了fs.symlink中软链接创建的基本使用，本文进行详细展开下。3.软连接的创建应用场景还是比较广泛，比如npm link调试，leran内部模块互相引用等等。
Vite-demo：使用vite工具，初始化vue3.x项目
02-13
Vite 是一个由 Vue.js 作者尤雨溪开发的现代化前端构建工具，它以其快速的启动时间和热模块替换（HMR）而闻名。在本文中，我们将深入探讨如何使用 Vite 初始化并运行一个 Vue 3.x 项目。首先，我们需要确保我们的...
使用vite从开始搭建vue项目
weixin_64608867的博客
04-01 1562
一、创建项目 这里根据vite的兼容性说明，要求node.js版本>=12.0.0 提供了npm,yarn,两种包管理工具的创建方式 用NPM： npm init @vitejs/app 使用yarn： yarn create @vitejs/app 然后按照提示进行操作！ 这里我们使用yarn来创建一个vue项目（这里我使用的Mac，与PC步骤基本一致） 在我们想要创建的项目都目录下打开终端（命令行工具） 输入如下命令 // Mac 其中sudo是获取
vue3 vite打包报错 node_api_throw_syntax_error+175743
weixin_47092531的博客
02-29 695
1.安装插件 npm install -g increase-memory-limit。修改 package.json文件下scripts中的build。2.在项目目录执行increase-memory-limit。解决方案二（建议使用）
记录：vite打包报错 error during build: Error: Parse error @:1:1
榴莲不好吃的专栏
07-29 645
网上搜索了下，没找到解决方案，找了个梯子去外面查了一圈，有人也遇到了类似的问题，打包的时候遇到import.meta.env会崩溃，于是，将页面中的打印的 “import.meta.env”相关代码去掉，再次打包就没问题了，虽然不知道为什么，但确实没问题可以了。但是打包就会报如下错误：error during build: Error: Parse error @:1:1。一直以为是vant的问题，各种升级，替换插件，发现没什么用，vant从3升级到4后，本地运行没问题，
vite项目本地打包以后预览报错
weixin_43773663的博客
02-10 1228
进入打包后的文件夹，打开终端!简单解决办法： 全局安装服务支持 http-sever ，安装后若不配置环境变量，需要使用http-server命令，也可以自己去配置环境变量，此处省略配置方法。vite创建的项目，打包后的文件本地预览报错，原因是file文件不支持import，需要开启个服务。http-server -p 8090 // 8090为自己设置的端口号，不要跟之前打开的冲突即可。输入下方命令行，开启一个服务，端口号设置不冲突即可。
vite+项目打包时报错很多
彭世瑜的博客
06-29 343
解决办法也很简单，跳过ts检查，不然小错误没法打包通过。
yarn create vite报错：文件名、目录名或卷标语法不正确
HUMM
11-04 3906
yarn create vite报错：文件名、目录名或卷标语法不正确
Yarn创建vite错误
xiaowen555555
02-15 1739
报错方式 success Installed "@vitejs/create-app@2.5.2" with binaries: - create-app - cva 文件名、目录名或卷 文件名、目录名或卷标语法不正确。 error Command failed. Exit code: 1 Command: D:\Install\nodejs\node_global\bin\create-app Arguments: vue-tailwind Directory: F:\code\ta
vite打包工具的介绍
m0_67403076的博客
03-05 1万+
vite: Vite是Vue的作者尤雨溪开发的Web开发构建工具，它是一个基于浏览器原生ES模块导入的开发服务器，在开发环境下，利用浏览器去解析import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用。同时不仅对Vue文件提供了支持，还支持热更新，而且热更新的速度不会随着模块增多而变慢。在生产环境下使用Rollup打包。 Vite具有以下特点： 快速的冷启动 即时热模块更新（HMR，Hot Module Replacement） 真正按需编译 Vite是在推出Vue 3的时候开发的，
yarn create vite my-vue-app --template /vue关于yarn创建vite所遇到的坑，创建vite错误
前端小攻城狮的博客
08-06 5383
复盘收集到的其他可能解决方法，本来以为是路径问题，或者版本问题，没想到都不是，但是都记录一下吧，方便其他人查找解决。例如：C:\Program~1\nodejs\node_cache (这是 windows 的一种路径表达方式)Path修改这两处：＂D:\nodejs\＂和＂D:\nodejs\node_global＂;得到路径：C:\Program Files\nodejs\node_cache。yarn的安装包默认是在c盘的而我yarn安装在D盘的所以就会报这样的错误！2.修改node的全局环境....
vite+ts+elementplus运行正常打包报错
m0_62317155的博客
05-28 6362
vue3+vite+ts+elementPlus中运行正常打包出错 能正常运行，但是打包出错 下面是问题描述，解决办法看目录解决办法那一项 组件代码在最后面 vue3+vite+ts+elementPlus的项目中，我遇到了npm run dev可以正常运行，然后运行npm run build的时候就报错的情况，编译不过去，在这里记录一下，而且在vscode中与element plus相关的是爆红的，但是可以正常运行，只是打包不能正常打包而已。就会报错 如在vscode中报这个红， 无法找到模块“ele
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

FOREVER-Q

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

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

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

打赏作者

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

抵扣说明：

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

余额充值