Vue3 <script setup>生产构建后变量在普通脚本中未定义问题咨询

这是正常行为，你的操作存在错误，原因和解决方法如下：

核心原因 #

<script setup>是Vue提供的语法糖，它内部定义的变量默认属于模块私有作用域，不会自动挂载到组件实例上，自然无法被选项式API（比如methods、data）通过this访问。

• 开发环境下Vite未做完全的代码压缩和作用域隔离，可能出现变量偶然可访问的情况，但这属于未被规范约束的“意外”；
• 生产构建时，代码会被做严格的作用域优化和Tree Shaking，私有变量会被隔离，所以访问时就是undefined。

而选项式的setup函数里，你通过return导出的变量会被Vue自动挂载到组件实例上，所以选项式API能通过this正常访问。

正确做法 #

如果要让<script setup>里的变量/方法被选项式API访问，必须用defineExpose主动暴露：

<script setup>
const hi = 'hi';
// 主动将变量暴露给组件实例
defineExpose({ hi })
</script>

<template>
  <h2>{{msg}}</h2>
  <button @click="sayHi">Say Hi</button>
</template>

<script>
export default {
  name : 'test',
  data () {
    return{
      msg: '', 
    }
  },
  methods:{
    sayHi(){
      this.msg = this.hi;
    }
  }
}
</script>

针对你提到的Pinia场景，同样需要在<script setup>里把Store实例或需要的action通过defineExpose暴露，才能在选项式API的方法中调用。

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