添加script标签后Vue Router的router-view无法显示视图求助

问题原因 #

Vue单文件组件（SFC）的解析逻辑是：

• 当组件没有<script>标签时，Vue会自动生成一个默认的组件选项对象（等价于export default {}），组件可以正常初始化并渲染模板。
• 但手动添加空<script>标签后，Vue会解析该标签内的内容，而空标签没有导出任何合法的组件选项，导致组件初始化失败，模板内容无法渲染。

解决办法 #

只需要在<script>标签内导出一个空的组件选项对象即可，哪怕是空对象也能让Vue正确识别组件：

<style lang="scss" src="../assets/scss/view/pokemonOverview.scss"></style>
<template>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, nihil?
</template>

<script>
export default {}
</script>

如果你使用Vue 3的<script setup>语法，直接保留空的<script setup>标签也可以，因为该语法会自动处理默认导出：

<style lang="scss" src="../assets/scss/view/pokemonOverview.scss"></style>
<template>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, nihil?
</template>

<script setup>
// 空标签也可正常工作
</script>

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