Ubuntu22.04下Node v12.22.9执行npm init vite遇语法错误无法初始化Vite应用

报错里的?.是可选链操作符，Node.js v12.x版本不支持这个ES6+语法，而最新版的create-vite已经使用了该语法，所以执行npm init vite时会触发语法错误。

1. 升级Node.js版本（推荐） #

Vite官方要求Node.js版本≥14.18.0或≥16.0.0，升级后即可正常使用npm init vite：

• 用nvm管理Node版本（无需卸载现有版本）：

  # 安装nvm
  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
  # 重启终端后，安装Node.js 16 LTS版本
  nvm install 16
  # 切换到16版本
  nvm use 16
  

• 之后再执行npm init vite即可正常初始化项目。

2. 指定兼容Node.js 12的create-vite版本 #

旧版本的create-vite未使用可选链语法，可通过指定版本号来初始化：

npm init vite@3.2.0

执行后按照终端提示选择框架、输入项目名即可完成初始化。

3. 手动初始化Vite项目 #

如果不想升级Node或指定版本，可手动搭建项目结构：

1. 创建项目文件夹并进入：

   mkdir my-vite-app && cd my-vite-app
   

2. 初始化npm项目：

   npm init -y
   

3. 安装兼容Node.js 12的Vite及框架依赖（以Vue 3为例）：

   npm install vite@3.2.0 vue@3
   

4. 创建核心文件：
   • 项目根目录创建index.html：

     <!DOCTYPE html>
     <html lang="zh-CN">
       <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Vite 项目</title>
       </head>
       <body>
         <div id="app"></div>
         <script type="module" src="/src/main.js"></script>
       </body>
     </html>
     

   • 创建src文件夹，里面新建main.js：

     import { createApp } from 'vue'
     import App from './App.vue'
     
     createApp(App).mount('#app')
     

   • src文件夹内新建App.vue：

     <template>
       <div>
         <h1>Hello Vite!</h1>
       </div>
     </template>
     

5. 修改package.json的scripts字段：

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

6. 启动项目：

   npm run dev
   

内容的提问来源于stack exchange，提问作者jack07Code