‘NODE_ENV‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。

问题发现

"build": "NODE_ENV=development vite build" 无法执行，提示：'NODE_ENV' 不是内部或外部命令，也不是可运行的程序 或批处理文件。

文献说明

Command	NODE_ENV	Mode
vite build	"production"	"production"
vite build --mode development	"production"	"development"
NODE_ENV=development vite build	"development"	"production"
NODE_ENV=development vite build --mode development	"development"	"development"

上面是官方文献的表格，无法在本地执行 NODE_ENV=development vite build ，报错如文章头部。

问题说明

问题出在尝试在 Windows 环境下设置环境变量 NODE_ENV 的方式上。

在 Windows 上，设置环境变量的语法与 Unix/Linux 系统稍有不同。

# 解决方法：

1. 使用 cross-env 库

推荐的解决方法是使用 cross-env 库，它能够跨平台地设置和使用环境变量。

这是因为在 Windows 上，使用 NODE_ENV=development 设置环境变量的语法与 Unix/Linux 平台上有所不同。

a. 首先，确保你已经全局安装了 cross-env：

npm install -g cross-env

b. 然后，在你的 package.json 文件中修改 "build" 命令：

"scripts": {
  "build": "cross-env NODE_ENV=development vite build"
}

c. 现在，当你运行 npm run build 命令时，cross-env 将会帮助正确地设置 NODE_ENV 环境变量，无论是在 Windows 还是其他操作系统上。

2. 手动设置环境变量（仅限于 Windows）

如果你不想使用 cross-env，也可以在 Windows 环境下手动设置环境变量，但语法略有不同：

"scripts": {
  "build": "set NODE_ENV=development && vite build"
}

在这个设置中，使用 set 命令来设置环境变量，然后用 && 连接命令。这种方法只在 Windows 环境下有效，不具有跨平台特性。

总结

使用 cross-env 是推荐的做法，因为它可以确保在不同操作系统上都能正确设置和使用环境变量。这样可以避免由于平台差异导致的问题，保持脚本的可移植性和稳定性。

---

实际操作

# 手动设置环境变量 set 方法

a. 创建一个 vue3 空白项目（如果你已有 vue3 项目可以跳过该步骤）

# 进入D盘
D:

# 安装vue3
npm create vue@latest

# 一路回车
Vue.js - The Progressive JavaScript Framework
 
√ 请输入项目名称： ... vue-project
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否 / 是
 
正在初始化项目 D:\vue-project...
 
# 进入项目目录
cd vue-project

# 安装依赖
npm i

# 运行项目
npm run dev

# 到浏览器打开
 VITE v5.2.12  ready in 662 ms
 
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

b. 在 App.vue 中加入一下代码：

<script setup>
console.log(import.meta.env);
console.log(process.env.NODE_ENV);
</script>

c. 打开 package.json 查看初始的 npm scripts

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
},

d. 更新你的 package.json 代码

"scripts": {
    "dev": "vite",
    "build": "NODE_ENV=development vite build",
    "preview": "vite preview"
}

e. 使用 vscode 内置 npm 脚本运行功能

f. 运行失败。整改成手动设置环境变量再进行 build ，请更新你的代码：

  "scripts": {
    "dev": "vite",
    "build": "set NODE_ENV=development && vite build",
    "preview": "vite preview"
  },

g. 再次运行 build，成功了

h. 查看 build 产物

i. 在浏览器打开控制台，查看打印日志

{
    "BASE_URL": "/",
    "MODE": "production",
    "DEV": true,
    "PROD": false,
    "SSR": false
}

development 

j. 实践后得出

(i). process.env.NODE_ENV 打印 development，这与 npm scripts 所设置的（NODE_ENV=development）对应上了

(ii). import.meta.env 输出对象中，MODE: "production"，是因为 build 默认就是构建生产“production”模式。

当然，这个是可以修改的，请更新你的 package.json：

"set NODE_ENV=development && vite build --mode development"

按照上面的 npm  scripts 修改后输出结果：

{
    "BASE_URL": "/",
    "MODE": "development",
    "DEV": true,
    "PROD": false,
    "SSR": false
}

# 使用 cross-env 库

a. 安装 cross-env 库（你可以选择全局安装，也可以对项目进行安装）

# 全局安装
npm install -g cross-env

# 项目内安装（开发依赖）
npm install --save-dev cross-env

b. cross-env 全局安装后，安装在你的 nodejs 文件夹里

如何定位你的 node 安装目录，快速查询方法：

C:\Users\Administrator>where node
D:\AppData\nodejs\node.exe

c.  步入正题，更新你的 package.json 代码：

"scripts": {
    "dev": "vite",
    "build": "cross-env NODE_ENV=development vite build",
    "preview": "vite preview"
}

d. 运行 build 后是没问题的

e. 浏览 build 产物，运行 preview

f. 访问 Local:   http://localhost:4173/ ，浏览器查看控制台的输出

{
    "BASE_URL": "/",
    "MODE": "production",
    "DEV": true,
    "PROD": false,
    "SSR": false
}

development

结果是明确的。

---

以上就是简答了解 NODE_ENV 和 模式。
需要注意的是，NODE_ENV（process.env.NODE_ENV）和模式是两个不同的概念。文章开头的表格就是影响 NODE_ENV 和模式的不同命令。