yarn创建vite项目——遇见的错误及解决方法

 今天尝试做一个vue3+vite的组件库项目,没想到第一步就开始出现问题,改了整整一天😅😅😅

那么我们开始:

首先:目录中间包含空格,导致报错

 会出现这种错误时因为 c:\program files 这里,中间有一个空格,很显然yarn帮并不能通过这个中间有空格的路径的内容

查看目录:

所以修改如下这个目录中的文件:

 点进去把里面所有的

C:\Program Files\....... 

修改成

C:\Program~1\.......

然后再次运行测试:

又出现一处错误

查看目录:

 

不再同一个盘下,一个c盘一个d盘,那我们就修改一下路径

运行:

 和:

 然后再次查看路径

 发现已经在同一目录下了,再次尝试创建项目:

成功创建项目

### 使用 Yarn 创建 Vite 项目 要使用 Yarn 创建一个基于 Vite 的新项目,可以按照以下方式操作: 运行命令 `yarn create vite` 来初始化一个新的 Vite 项目[^1]。此命令会引导用户选择所需的框架和技术栈(例如 Vue、React 或纯 JavaScript/TypeScript)。完成选项设置后,Yarn 将自动安装依赖项并生成基础项目结构。 创建完成后,项目的默认目录结构通常如下所示[^2]: ``` new-lan-ui-hhgj-pc/ ├── public/ # 静态资源目录 ├── src/ # 源代码 │ ├── assets/ # 静态资源(如图片、图标等) │ ├── components/ # 全局组件目录 │ ├── router/ # 路由配置 │ ├── store/ # Pinia 状态管理 │ ├── styles/ # 全局样式(如变量、混入) │ ├── views/ # 页面视图 │ ├── App.vue # 主应用组件 │ └── main.ts # 项目入口文件 ├── .env # 环境变量文件 ├── vite.config.ts # Vite 配置 ├── tsconfig.json # TypeScript 配置 └── yarn.lock # Yarn 锁文件 ``` 如果遇到任何错误,比如因路径中含有空格而导致的问题,则可以通过修改全局 bin 目录来规避此类情况。具体做法是先查看当前的全局 bin 路径:`yarn global bin`,然后重新设定前缀至无空格的位置,例如 `D:\yarn`,通过命令实现:`yarn config set prefix "D:\yarn"`[^3]。 另外,在某些情况下可能会碰到 SSL 证书过期或其他网络相关问题,这些问题往往源于系统时间不一致或者 TLS 设置不当引起的。此时可尝试调整系统的日期时间为正确值,或是临时禁用严格 SSL 校验以继续流程[^4]。 最后,启动开发服务器可通过执行 `yarn dev` 完成;构建生产版本则需调用 `yarn build` 命令;而预览已构建好的生产版内容应该使用 `yarn preview`。 ```bash # 启动开发服务器 yarn dev # 构建生产版本 yarn build # 预览生产版本 yarn preview ``` ### 注意事项 当指定模板时,例如选用 Vue 技术栈,可以在初始命令后面附加参数 `--template vue`,即完整形式为 `yarn create vite my-vue-app --template vue`[^5]。 #### 示例代码片段 以下是简单的 Vite 配置示例 (`vite.config.ts`) 中的部分定义区域展示: ```typescript import { defineConfig } from 'vite' export default defineConfig({ define: { __APP_VERSION__: JSON.stringify('1.0.0'), }, }) ```
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值