VUE3+VITE+TS+PNPM点滴

原创

已于 2026-05-22 11:19:45 修改 · 785 阅读

于 2024-09-10 09:38:52 首次发布

pnpm

pnpm 全称 performant npm，意思为高性能的 npm，需要Node.js才能运行。

安装

npm install -g pnpm

与npm相比，pnpm有一定优点：

磁盘空间的使用：npm在每个项目的node_modules中都会安装所有的依赖项，这导致了大量的磁盘空间被重复使用。而pnpm和yarn则采用了不同策略。pnpm使用了一个全局存储来保存所有项目的依赖项，只在项目的node_modules目录中创建对全局存储中的依赖项的链接，从而大大减少了磁盘空间的使用。yarn则通过缓存已下载的依赖项来减少磁盘空间的使用。
并行安装：npm在安装依赖项时是按顺序一个接一个地进行的，而pnpm和Yarn则可以同时安装多个依赖项，从而提高了安装速度。
网络性能：Yarn引入了一个离线模式，这意味着一旦一个包被下载，它将被缓存在本地，以后的安装可以直接从缓存中获取，而不必从网络上下载。这大大提高了在网络连接不佳或者完全没有网络连接的情况下的性能。

参考资料
PNPM中文网（有详细参数解释）

tsconfig.json中的配置

参考资料
TypeScript 编译选项 compilerOptions 全部配置项

问题点滴

执行pnpm命令，出现“pnpm : 无法加载文件”
C:\Users\xxx\AppData\Roaming\npm\pnpm.ps1，因为在此系统上禁止运行脚本**的报错信息
解决方法
以管理员身份打开POWERSHELL，输入以下命令，出现提示后输入‘A’
```
set-ExecutionPolicy RemoteSigned
```

执行import { createApp } from ‘vue’; 时报错
createApp标红，从vue中找不到createApp，想重新安装vue，结果提示如下

ERR_PNPM_UNEXPECTED_STORE  Unexpected store location
 
The dependencies at "C:\xxx\node_modules" are currently linked from the store at "D:\.pnpm-store\v3".
 
pnpm now wants to use the store at "E:\.pnpm-store\v3" to link dependencies.
 
If you want to use the new store location, reinstall your dependencies with "pnpm install".
 
You may change the global store location by running "pnpm config set store-dir <dir> --global".
(This error may happen if the node_modules was installed with a different major version of pnpm)

解决方法
执行以下命令

pnpm config set store-dir E:\.pnpm-store\v3 --global

然后执行pnpm i，键入y

关于NPM仓库
遇到过如下错误：

GET https://registry.npmjs.org/create-vue error (ECONNRESET).
GET https://registry.npm.taobao.org/create-vue error (CERT_HAS_EXPIRED)

解决方法
如果以上仓库不能用，可试试下面几个：

pnpm config set registry https://registry.npmmirror.com
pnpm config set registry https://npm.aliyun.com/
pnpm config set registry https://mirrors.cloud.tencent.com/npm/

执行vue add typescript时报错
使用vue add typescript命令，按照下图进行配置（后期可以再次执行此命令进行配置），可以协助配置tsconfig.json

>vue add typescript

📦  Installing @vue/cli-plugin-typescript...

+ @vue/cli-plugin-typescript@5.0.8
added 123 packages from 57 contributors and removed 11 packages in 15.57s

119 packages are looking for funding
  run `npm fund` for details

✔  Successfully installed plugin: @vue/cli-plugin-typescript

// 是否使用class类风格编码，默认是yes，这里直接回车使用默认
? Use class-style component syntax? Yes

// 是否同时使用ts和babel编译代码。这是因为ts编译后的代码是es6代码，如果需要最终代码编译成es5的js代码，需要使用bable。也就是选择是否将ts和bable编译器结合使用
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes

//将js文件转为ts文件，默认yes ，这里同样选默认
? Convert all .js files to .ts? Yes

//允许编辑js代码，默认no，这里选择yes，允许编译
? Allow .js files to be compiled? Yes

// 是否跳过所有类型文件的检查，默认yes，这里使用默认。不建议检查所有类型，因为很多类型文件是外部库提供的
? Skip type checking of all declaration files (recommended for apps)? Yes