Vue3 <script setup>导出mobile变量报错：Modifiers cannot appear here

错误原因 #

你遇到的“Modifiers cannot appear here”错误，大概率是因为在<script setup>里错误使用了export修饰符（比如写了export let mobile = ...）。<script setup>的特性是顶层声明的变量/函数默认会自动暴露给模板，不需要手动用export导出，这是它和普通<script>的核心区别。

正确实现代码 #

下面是符合Vue3规范的移动端检测与导航渲染代码：

<template>
  <!-- 用v-if/v-else实现互斥渲染，逻辑正确 -->
  <MNavbar v-if="mobile" />
  <Navbar v-else />
</template>

<script setup>
// 导入需要的Vue API和组件
import { ref, onMounted } from 'vue'
import MNavbar from './components/MNavbar.vue'
import Navbar from './components/Navbar.vue'

// 声明响应式变量，控制导航显示
const mobile = ref(false)

// 封装UA检测函数，提高代码可读性
const checkMobileDevice = () => {
  const userAgent = navigator.userAgent.toLowerCase()
  // 匹配目标移动端UA
  return /android|iphone|opera mini/.test(userAgent)
}

// 组件挂载后执行检测，确保navigator对象可用
onMounted(() => {
  mobile.value = checkMobileDevice()
  
  // 可选：监听窗口大小变化，适配设备旋转场景
  window.addEventListener('resize', () => {
    mobile.value = checkMobileDevice()
  })
})
</script>

代码规范指正 #

1. <script setup>无需手动export：所有顶层声明的变量、函数、导入的组件都会自动暴露给模板，不要加export关键字，否则会触发语法错误。
2. 逻辑封装成函数：把UA检测逻辑单独封装成函数，避免代码冗余，也方便后续修改或复用。
3. 使用响应式变量：用ref声明mobile，确保变量值变化时模板能自动更新渲染状态。
4. 生命周期钩子执行检测：在onMounted里执行检测，确保浏览器环境的navigator对象已初始化（虽然浏览器中一般不会有问题，但更严谨）。

替代方案推荐 #

方案1：使用计算属性（简化初始检测） #

如果不需要监听窗口大小变化，仅做初始设备检测，可以用computed简化代码：

<script setup>
import { computed } from 'vue'
import MNavbar from './components/MNavbar.vue'
import Navbar from './components/Navbar.vue'

const mobile = computed(() => {
  const userAgent = navigator.userAgent.toLowerCase()
  return /android|iphone|opera mini/.test(userAgent)
})
</script>

方案2：媒体查询（更可靠的响应式方案） #

UA检测存在局限性（比如桌面浏览器模拟移动端时UA可能不变），推荐结合屏幕尺寸的媒体查询方案，更符合响应式设计逻辑：

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import MNavbar from './components/MNavbar.vue'
import Navbar from './components/Navbar.vue'

const mobile = ref(false)
// 自定义断点，比如768px以下视为移动端
const mobileMediaQuery = window.matchMedia('(max-width: 768px)')

// 监听媒体查询变化
const handleMediaChange = (e) => {
  mobile.value = e.matches
}

onMounted(() => {
  mobile.value = mobileMediaQuery.matches
  mobileMediaQuery.addEventListener('change', handleMediaChange)
})

// 组件卸载时移除监听，避免内存泄漏
onUnmounted(() => {
  mobileMediaQuery.removeEventListener('change', handleMediaChange)
})
</script>

关于v-if的问题 #

之前用两个v-if无效是因为两个条件可能同时为true，导致两个导航都渲染；而v-if+v-else是互斥逻辑，同一时间只会渲染其中一个，这是正确的实现方式。

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