Vue v2.7 + Pinia v2.0.22构建时出现@vue/devtools-api依赖缺失错误

问题原因 #

Pinia 2.x版本依赖@vue/devtools-api作为开发工具集成的基础依赖，但该包可能因npm/yarn的peer依赖处理逻辑未自动安装；另外你的Webpack配置中@vue别名指向本地src/vue目录，导致Webpack查找@vue/devtools-api时优先查找本地目录而非node_modules中的包，加剧了这个问题。

解决方案 #

1. 手动安装缺失依赖 #

直接安装@vue/devtools-api到项目依赖：

npm install @vue/devtools-api --save
# 或使用Yarn
yarn add @vue/devtools-api

2. 修正Webpack的@vue别名配置 #

你的Webpack配置中@vue别名覆盖了npm官方的@vue命名空间，导致Webpack无法正确解析@vue/devtools-api这类官方包。修改resolve.alias：

resolve: {
  alias: {
    '@scripts': path.resolve(__dirname, 'src/vue'),
    // 移除或修改@vue别名，避免覆盖官方包
    // 替换为更具体的目录别名，比如：
    '@vue-components': path.resolve(__dirname, 'src/vue/components')
  },
  // 确保node_modules是优先查找的模块目录
  modules: ['node_modules', path.resolve(__dirname, 'src')]
}

如果必须保留@vue别名，改为精确匹配而非前缀匹配：

resolve: {
  alias: {
    '@scripts': path.resolve(__dirname, 'src/vue'),
    '@vue$': path.resolve(__dirname, 'src/vue') // 仅匹配精确的@vue导入，不影响@vue/xxx
  }
}

3. 确保Pinia在Vue2.7中正确初始化 #

Vue2.7自带Composition API，但Pinia仍需通过插件方式注册，在你的入口文件（如src/vue/theme.js）中添加：

import Vue from 'vue'
import { createPinia, PiniaVuePlugin } from 'pinia'

// 注册Pinia插件
Vue.use(PiniaVuePlugin)
// 创建Pinia实例
const pinia = createPinia()

// 在Vue实例中挂载pinia
new Vue({
  // ...其他配置
  pinia
}).$mount('#app')

4. 清理缓存重新安装依赖（可选） #

如果上述步骤无效，清理依赖缓存后重新安装：

# 删除node_modules和锁文件
rm -rf node_modules package-lock.json yarn.lock
# 重新安装
npm install
# 或Yarn
yarn install

内容的提问来源于stack exchange，提问作者G.Rose