如何修复UseStore和Userouter无法使用及构建报错问题？

1. 核对依赖版本兼容性 #

• 先确认Vue、Vuex、VueRouter版本是否匹配：
  • Vue 2.x 必须搭配 Vuex 3.x + VueRouter 3.x
  • Vue 3.x 必须搭配 Vuex 4.x + VueRouter 4.x
• 版本不匹配时执行对应命令调整：

  # Vue3环境更新适配依赖
  npm install vuex@4 vue-router@4
  # Vue2环境需安装Composition API适配插件
  npm install vuex-composition-api
  

2. 清理构建缓存后重试 #

• 执行以下命令彻底清理缓存与依赖，重新构建：

  # 删除旧依赖与锁文件
  rm -rf node_modules package-lock.json
  npm install
  # 强制清除构建缓存（根据脚手架选择命令）
  # Vue CLI项目
  npm run build --no-clean
  # Vite项目
  vite build --force
  

3. 排查全局配置与其他文件 #

• 检查项目入口文件（main.js/main.ts），确认store和router实例已正确创建并挂载：

  // Vue3示例配置
  import { createApp } from 'vue'
  import { createStore } from 'vuex'
  import { createRouter, createWebHistory } from 'vue-router'
  import App from './App.vue'
  
  const store = createStore({
    // 你的store配置
  })
  
  const router = createRouter({
    history: createWebHistory(),
    routes: [] // 你的路由配置
  })
  
  createApp(App).use(store).use(router).mount('#app')
  

• 全局搜索项目中所有使用useStore/useRouter的文件，确认是否在非组件的setup函数外调用这两个API（这是常见错误）

4. 检查构建配置文件 #

• 若使用Vue CLI，确认vue.config.js中无异常配置；若使用Vite，检查vite.config.js的resolve规则是否导致模块解析错误

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