Vue3+TypeScript项目build时报this.$store未定义问题如何解决？

核心问题原因 #

1. Vue 模板中不需要加this前缀，你写的this.$store在生产构建时指向不是组件实例，导致运行时读不到$store，本地dev环境因为编译规则更宽松所以未触发报错。
2. TypeScript 没有识别到全局挂载的$store类型，导致构建时类型检查报错。
3. 需要确认状态管理库（Vuex/Pinia）已在项目入口正确注册。

分步解决方案 #

第一步：删除所有模板中的this前缀 #

把模板中所有类似

<input :value="this.$store.state.shareUrl"/>

的代码，修改为

<input :value="$store.state.shareUrl"/>

即可解决生产环境页面空白、报$store为undefined的问题。

第二步：补充TS全局类型声明解决类型报错 #

如果你使用的是Vuex：
在src目录下新建vuex.d.ts类型声明文件，写入以下内容：

import { Store } from 'vuex'

// 自定义你的State类型，补全所有state字段的类型定义
interface MyState {
  shareUrl: string
  // 其他state字段...
}

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $store: Store<MyState>
  }
}

如果你使用的是Pinia：
无需额外声明全局$store类型，更推荐直接导入对应store实例使用，类型自动推导更安全：

<script setup lang="ts">
import { useCommonStore } from '@/store/common'
import { storeToRefs } from 'pinia'

const commonStore = useCommonStore()
// 解构保持响应性
const { shareUrl } = storeToRefs(commonStore)
</script>

<template>
  <input :value="shareUrl"/>
</template>

第三步：确认状态管理库已正确注册 #

检查main.ts入口文件，确认已调用app.use()注册store实例：

import { createApp } from 'vue'
import App from './App.vue'
import store from './store' // Vuex的store导出路径/或者Pinia的createPinia()实例

const app = createApp(App)
app.use(store) // 必须有这行才能挂载全局$store
app.mount('#app')

优化建议 #

• 尽量不要直接在模板中访问$store.state，建议用计算属性包裹对应字段，后续修改字段路径时只需要改一处即可。
• Vue3 + TS 项目更推荐使用Pinia作为状态管理库，原生支持TS类型推导，不需要额外写全局类型声明，维护成本更低。

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