VS Code 终端使用命令错误

[TOC]

## 未带主命令使用错误

**错误内容**

```bash
所在位置 行:1 字符: 3
+ --configLoader bundle
+   ~
一元运算符“--”后面缺少表达式。
所在位置 行:1 字符: 3
+ --configLoader bundle
+   ~~~~~~~~~~~~
表达式或语句中包含意外的标记“configLoader”。
    + CategoryInfo          : ParserError: (:) [], ParentContainsErrorRecordException
    + FullyQualifiedErrorId : MissingExpressionAfterOperator
```

这个错误是因为你在 **PowerShell/vs code CLI** 中直接输入了 `--configLoader bundle`，而 **PowerShell/vs code CLI** 把开头的 `--` 解释成了**一元递减运算符**（类似 `$i--` 的用法），所以它认为 `--` 后面应该跟一个变量或表达式，但实际却遇到了单词 `configLoader`，于是报错。

**根本原因**

- 你原本可能想运行某个命令（比如 `webpack`、`vite`、`node` 等），然后传递参数 `--configLoader bundle`。
- 但在** PowerShell/vs code CLI** 中，单独输入 `--configLoader` 不是一个合法的命令，且 `--` 被解析为运算符，导致语法错误。

**解决方法**

+ 补全主命令（最常见），确认你打算运行哪个程序，然后把它写在最前面。例如：
```BASH
# 假设是 webpack
webpack --configLoader bundle
# 或者是 vite
vite --configLoader bundle
# 或者是 node 脚本
node some-script.js --configLoader bundle
```

+ 使用 `--%` 停止解析（适用于原生命令行工具）
如果你不想让 PowerShell 解析参数中的 `--`，可以使用 `--%`（停止解析符）。
```BASH
mycommand --% --configLoader bundle
```
注意：`--%` 后面的内容会原样传递给程序，但某些复杂场景（如带空格或引号）可能仍需调整。

+ 转义 `--` 或使用引号（不推荐）
```BASH
# 用引号包裹整个参数（需要主命令）
mycommand "--configLoader" "bundle"
```
但这取决于目标程序是否接受这种引号形式，通常不如直接写全命令干净。

+ 在 CMD 或 Git Bash 中运行（临时方案）
如果 PowerShell 总是让你头疼，可以临时切换到 `cmd`：
```shell
cmd /c "your-command --configLoader bundle"
```
或者直接打开 `命令提示符` 执行。

**你的下一步**

- **检查你原本想执行的完整命令是什么**。比如是不是在复制某个教程中的 `npx webpack --configLoader bundle` 或者 `next build --configLoader bundle`？
- 把主命令补上，错误就会消失。

## vite : 无法将“vite”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

**错误内容**

```bash
vite : 无法将“vite”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。
所在位置 行:1 字符: 1
+ vite --configLoader bundle
+ ~~~~
    + CategoryInfo          : ObjectNotFound: (vite:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException
```

这个错误通常是因为系统找不到 `vite` 命令的执行文件，原因和处理方法如下：

**根本原因**

报错 `无法将“vite”项识别为 cmdlet...`，主要有两种可能：

+ **Vite 未安装或未成功安装**：最直接的原因，可能从未安装过 Vite，或安装过程因网络等原因中断。
+ **环境变量 `PATH` 未正确配置**：Vite 已安装，但其可执行文件所在的 npm 全局目录没有被添加到系统的 `PATH` 环境变量中，导致系统无法找到命令。

**解决方案**

你可以按下面的顺序，从最简单到最彻底地尝试解决：

+ **安装/重装 Vite**
这是最直接的方法，可以清除旧文件并确保完整安装。

- **安装 Node.js**：Vite 依赖 Node.js，请从 [nodejs.org](https://nodejs.org/) 下载并安装。**安装后重启所有终端和代码编辑器**（如 VS Code）。

- **安装 Vite**：在终端中运行以下命令进行全局安装：
```bash
npm install -g vite
```

- **使用国内镜像（推荐）**：如果在安装过程中遇到网络问题（如卡住不动），可以改用国内镜像加速：
```bash
npm install -g vite --registry=https://registry.npmmirror.com
```

- **检查 Node 版本**：确保 Node.js 版本 **18 或更高**，低版本可能导致 Vite 无法运行。

+ **检查环境变量 `PATH`（如果重装后仍不行）**
如果 Vite 已安装，但命令依然报错，很可能是 `PATH` 配置问题。

- 首先，查看 npm 全局包的安装路径：
```bash
npm config get prefix
```

- 获取到的路径通常是类似 `C:\Users\你的用户名\AppData\Roaming\npm` 的目录。

- 将该路径添加到系统环境变量 `Path` 中

**应急方案**

在问题彻底解决前，可以通过以下方式临时启动项目：

+ **使用 `npx vite`**：`npx` 是 npm 自带的工具，它会尝试运行项目本地或临时的 Vite 版本。
+ **使用项目本地脚本**：进入项目目录，先安装依赖 `npm install`，再运行 `npm run dev`，它会自动执行 `node_modules/.bin` 下的 Vite。
+ **切换终端类型**：暂时切换到系统自带的 **命令提示符 (CMD)** 来运行命令，可以绕过 PowerShell 的执行策略限制。

**补充说明：关于 PowerShell 执行策略**

如果你遇到的报错信息中包含 `vite.ps1 cannot be loaded because running scripts is disabled`，这是 PowerShell 的安全策略问题。

解决方法如下（以管理员身份运行 PowerShell 执行其一）：
+ **为当前用户设置策略**（推荐）：
```powershell
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
```
输入 `Y` 确认即可。

+ **或仅绕过当前会话的限制**：
```powershell
Set-ExecutionPolicy Bypass -Scope Process
```

## 安装全局vite报错

**错误内容**

```bash
npm error code EPERM
npm error syscall mkdir
npm error path C:\Program Files (x86)\dev\nvm\v23.11.0\node_modules\vite
npm error errno -4048
npm error Error: EPERM: operation not permitted, mkdir 'C:\Program Files (x86)\dev\nvm\v23.11.0\node_modules\vite'
npm error     at async mkdir (node:internal/fs/promises:853:10)
npm error     at async C:\Program Files (x86)\dev\nvm\v23.11.0\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:624:20
npm error     at async Promise.allSettled (index 0)
npm error     at async [reifyPackages] (C:\Program Files (x86)\dev\nvm\v23.11.0\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:325:11)
npm error     at async Arborist.reify (C:\Program Files (x86)\dev\nvm\v23.11.0\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:142:5)
npm error     at async Install.exec (C:\Program Files (x86)\dev\nvm\v23.11.0\node_modules\npm\lib\commands\install.js:150:5)
npm error     at async Npm.exec (C:\Program Files (x86)\dev\nvm\v23.11.0\node_modules\npm\lib\npm.js:207:9)
npm error     at async module.exports (C:\Program Files (x86)\dev\nvm\v23.11.0\node_modules\npm\lib\cli\entry.js:74:5) {
npm error   errno: -4048,
npm error   code: 'EPERM',
npm error   syscall: 'mkdir',
npm error   path: 'C:\\Program Files (x86)\\dev\\nvm\\v23.11.0\\node_modules\\vite'
npm error }
npm error
npm error The operation was rejected by your operating system.
npm error It's possible that the file was already in use (by a text editor or antivirus),
npm error or that you lack permissions to access it.
npm error
npm error If you believe this might be a permissions issue, please double-check the
npm error permissions of the file and its containing directories, or try running
npm error the command again as root/Administrator.
npm error A complete log of this run can be found in: C:\Users\Administrator\AppData\Local\npm-cache\_logs\2026-04-23T06_24_16_505Z-debug-0.log
```

**报错原因**

这个错误是因为在 Windows 系统下，C:\Program Files (x86)\dev\nvm\v23.11.0 目录需要管理员权限才能写入。npm 无法在该目录下创建 node_modules\vite 文件夹，因此报 EPERM

**解决方法**

+ ** 以管理员身份运行终端（推荐）**
- 关闭当前命令提示符 / PowerShell / VS Code 终端。
- 右键点击终端图标 → **以管理员身份运行**。
- 重新执行安装命令：
```bash
npm install -g vite
```

+ **更改 npm 全局安装目录到用户目录**
如果不想每次都使用管理员权限，可以把全局包安装到你的用户目录下：
```bash
# 在用户目录创建全局文件夹
mkdir C:\Users\你的用户名\AppData\Roaming\npm-global
# 配置 npm 使用该路径
npm config set prefix C:\Users\你的用户名\AppData\Roaming\npm-global
# 将该路径添加到系统 PATH 环境变量
# （手动添加：系统属性 → 环境变量 → Path → 新建 → 输入上述路径）
```

之后安装全局包就不需要管理员权限了。

## 直接在vue模板中使用了 import.meta.env

**错误内容**

```bash
[vite] Internal server error: Error parsing JavaScript expression: import.meta may appear only with 'sourceType: "module"' (1:1)
```

错误代码如下

```HTML
<template>
  import.meta.env.BASE_URL
</template>
```

**解决方法**

在 Vue 模板中直接使用 import.meta.env：这是 Vue 项目中最常见的原因，将 import.meta 迁移至 `<script>` 标签，例如下面示例

```HTML
<script setup>
// 在 <script> 中读取环境变量
const baseUrl = import.meta.env.BASE_URL;
</script>
<template>
  
  <img :src="`${baseUrl}assets/img/pic.jpg`" />
</template>
```