Vue项目构建后部分功能失效，删除用户时报TypeError错误求助

核心原因 #

1. 作用域不兼容：你在<script setup>（Composition API）中声明的selectedMembers，属于独立的Composition作用域，无法通过Options API里的this访问。开发环境下Vue会做临时兼容处理，但生产构建时的代码优化会直接剔除这种无效访问，导致this.selectedMembers未定义。
2. 错误的变量重置方式：就算能访问到，你在deleteSelectedMembers里写this.selectedMembers = ref([])也是错误的——Composition API的ref变量需要通过.value修改值，而非重新创建一个新的ref对象。

解决方案 #

方案一：统一使用Composition API（推荐） #

将所有逻辑迁移到<script setup>中，避免混合两种API风格：

<script setup>
import { ref, watch, onMounted } from 'vue'
import axios from "@/axios";
import { useModalStore } from '@/stores';
import { SearchIcon } from '@heroicons/vue/solid'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'

const route = useRoute()
const { t } = useI18n()

// 声明所有响应式变量
const selectedMembers = ref([])
const members = ref([])
const slicedMembers = ref([])
const currentPage = ref(1)
const ItemsPerPage = ref(10)
const search = ref("")

// 监听路由修改页面标题
watch(route, (to) => {
  document.title = to.meta.title || t('Members') + ' - sdf';
}, { immediate: true })

// 替代created钩子
onMounted(async () => {
  await getAllMembers()
  sliceMembers()
})

// 封装成员列表获取逻辑
async function getAllMembers() {
  const res = await axios.get('user/list')
  members.value = res.data
}

// 封装列表分页切片逻辑
function sliceMembers() {
  const start = (currentPage.value - 1) * ItemsPerPage.value
  slicedMembers.value = members.value.slice(start, start + ItemsPerPage.value)
}

// 修正后的删除选中成员逻辑
async function deleteSelectedMembers(yes) {
  if (!yes) return
  for (const id of selectedMembers.value) {
    await axios.delete(`user/delete-by-id/${id}`)
  }
  selectedMembers.value = [] // 直接重置ref的value
  await getAllMembers()
  sliceMembers()
}
</script>

方案二：保留Options API，调整变量位置 #

如果要继续使用Options API，将selectedMembers移到data中，确保能通过this正常访问：

<script>
import axios from "@/axios";
import { useModalStore } from '@/stores';
import { SearchIcon } from '@heroicons/vue/solid'

export default {
    name: 'ControlDashboardView',
    watch: {
        $route: {
            immediate: true,
            handler(to) {
                document.title = to.meta.title || this.$t('Members') + ' - sdf';
            }
        },
    },
    data() {
        return {
            members: [],
            slicedMembers: [],
            currentPage: 1,
            ItemsPerPage: 10,
            search: "",
            selectedMembers: [] // 将变量移到这里
        }
    },

    async created() {
        await this.getAllMembers();
        this.sliceMembers();
    },
    methods: {
        async getAllMembers() {
            const res = await axios.get('user/list')
            this.members = res.data
        },
        sliceMembers() {
            const start = (this.currentPage - 1) * this.ItemsPerPage
            this.slicedMembers = this.members.slice(start, start + this.ItemsPerPage)
        },
        async deleteSelectedMembers(yes) {
            if (!yes) return;
            for (let i = 0; i < this.selectedMembers.length; i++) {
                await axios.delete("user/delete-by-id/" + this.selectedMembers[i]);
            }

            this.selectedMembers = [] // 直接重置数组
            await this.getAllMembers();
            this.sliceMembers();
        }
    }
}
</script>

其他功能异常的排查方向 #

生产构建后多个功能失效，大概率也是因为Composition API与Options API混合使用时的作用域冲突——比如在Options API中访问setup声明的变量，或在setup中错误调用Options API的属性。优先检查所有跨API访问的变量和方法，确保作用域一致。

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