如何安装3.x版本Vite适配暂不支持Vite4.1的Quasar Framework

正确指定Vite 3.x版本初始化项目 #

直接执行npm create vite@3可能因为npm的tag匹配规则，没能精准命中3.x系列版本，你可以通过以下两种方式指定版本：

• 指定3.x全系列范围：

  npm create vite@^3.0.0
  

• 指定3.x的稳定精确版本（比如3.2.7，是3.x分支的最终稳定版）：

  npm create vite@3.2.7
  

执行上述命令后，会正常启动Vite 3.x的CLI向导，按提示选择Vue、TypeScript模板即可。

手动添加Pinia依赖 #

Vite官方模板默认不包含Pinia，项目初始化完成后，进入项目目录安装兼容Vite 3.x的Pinia版本：

npm install pinia@^2.0.0

接着完成Pinia的基础配置：

1. 在src/main.ts中注册Pinia：

   import { createPinia } from 'pinia'
   import { createApp } from 'vue'
   import App from './App.vue'
   
   const app = createApp(App)
   app.use(createPinia())
   app.mount('#app')
   

2. 创建示例store文件（比如src/stores/counter.ts）：

   import { defineStore } from 'pinia'
   
   export const useCounterStore = defineStore('counter', {
     state: () => ({ count: 0 }),
     actions: {
       increment() {
         this.count++
       }
     }
   })
   

验证Vite版本 #

项目初始化完成后，打开package.json文件，确认devDependencies中的vite版本处于3.x区间：

{
  "devDependencies": {
    "vite": "^3.2.7"
  }
}

若版本不符合预期，手动修改版本号后执行npm install重新安装即可。

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