Vue开发模式正常，构建后Script Setup变量无法在普通Script访问

问题根源 #

<script setup> 是Vue3的编译时语法糖，内部定义的变量默认处于模块私有作用域，不会自动挂载到组件实例（即this对象）上。开发模式下，Vue的调试机制会保留临时变量暴露，让你能通过this访问setup里的内容，但生产构建时会进行代码优化，移除这些非必要的暴露，导致普通<script>中的方法无法再通过this访问setup内的变量。

解决方案1：统一使用<script setup>编写逻辑（推荐） #

Vue3官方推荐优先使用<script setup>编写组件逻辑，把logout方法直接移到setup中即可，无需依赖组件实例：

<script setup>
import { ref } from "vue";
import { storeToRefs } from "pinia";
import { useAuthStore } from "@/stores/auth-store";
const authStore = useAuthStore();
const { user } = storeToRefs(authStore);

const searchDropdown = ref(false);
const showSearchDropdown = () => {
  searchDropdown.value = true;
};
const hideSearchDropdown = () => {
  searchDropdown.value = false;
};

// 直接在setup中定义logout方法
const logout = async () => {
  await authStore.logout();
};
</script>

<script>
export default {
  name: "Top Bar",
  data() {
    return {
      pageName: this.$route.name,
    };
  },
};
</script>

解决方案2：显式暴露setup内的变量（兼容混合写法） #

如果必须保留普通<script>的写法，需要使用defineExpose显式将setup内的authStore暴露到组件实例，这样普通<script>中的this才能访问到：

<script setup>
import { ref, defineExpose } from "vue";
import { storeToRefs } from "pinia";
import { useAuthStore } from "@/stores/auth-store";
const authStore = useAuthStore();
const { user } = storeToRefs(authStore);

const searchDropdown = ref(false);
const showSearchDropdown = () => {
  searchDropdown.value = true;
};
const hideSearchDropdown = () => {
  searchDropdown.value = false;
};

// 显式暴露需要被普通Script访问的变量
defineExpose({
  authStore
});
</script>

<script>
export default {
  name: "Top Bar",
  data() {
    return {
      pageName: this.$route.name,
    };
  },
  methods: {
    async logout() {
      await this.authStore.logout();
    },
  },
};
</script>

额外提示 #

尽量避免混合使用<script setup>和普通<script>编写核心逻辑，保持代码风格统一。<script setup>提供了更简洁的组合式API写法，也能避免这类作用域相关的问题。

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