Vue 3 单文件组件不支持多个 script 标签，因构建工具会报错且破坏响应式与类型推导；应通过组合函数拆分逻辑或命名导出多个组件替代。

Vue 3 单文件组件（.vue）**不支持在一个文件中编写多个 `<script>` 标签**。这是由 Vue 官方规范和 `vue-loader` / `@vitejs/plugin-vue` 等构建工具严格限制的——每个 `.vue` 文件**最多只能有一个 `<script>` 块**（包括 `<script setup>`），否则会直接报错，无法编译通过。</script>

为什么不能写多个 script？

根本原因在于构建流程：vue-loader 会将整个 `.vue` 文件解析为一个标准的 CommonJS 或 ESM 模块，其中 `<script>` 块的内容最终被提取并导出为组件定义对象（或 `setup()` 函数）。多个 `<script>` 会导致模块导出逻辑冲突、作用域混乱、类型推断失败，且违背单文件组件“单一入口”的设计初衷。</script>

• 官方文档明确说明：“每个 `.vue` 文件最多包含一个 `<script>` 块。”</script>
• 尝试添加第二个 `<script>`（无论是否带 `setup`），Vite 或 Webpack 会在启动或热更新时抛出类似 <code>Unexpected multiple script blocks 的错误。&lt;/script&gt; &lt;/li&gt; &lt;li&gt;即使绕过工具链强行拼接，也会破坏响应式绑定、props 类型推导、IDE 自动补全等关键能力。&lt;/li&gt; &lt;/ul&gt; &lt;h3&gt;想实现类似“多个脚本”的效果，该怎么替代？&lt;/h3&gt; &lt;p&gt;实际开发中，所谓“多个 script”的需求，通常指向两类场景：逻辑拆分复用、或导出多个组件。对应有清晰、推荐的替代方案：&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/xiazai/skill1140&quot; title=&quot;Vue&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/000/000/081/178797612947731.jpg&quot; alt=&quot;Vue&quot; onerror=&quot;this.onerror='';this.src='/static/lhimages/moren/morentu.png'&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill1140&quot; title=&quot;Vue&quot;&gt;Vue&lt;/a&gt; &lt;p&gt;避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill1140&quot; title=&quot;Vue&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;ul&gt; &lt;li&gt; &lt;strong&gt;拆分逻辑 → 用 Composition API + 独立组合函数（composables）&lt;/strong&gt;：&lt;br&gt;把不同功能的逻辑（如表单校验、数据加载、权限控制）抽成单独的 `.ts` 文件，例如 &lt;code&gt;useForm.ts</code>、<code>useApi.ts</code>，然后在 `<script setup>` 中按需导入使用。</script>
• 导出多个组件 → 在同一文件中定义并命名导出多个组件对象：
  利用 `defineComponent` 显式创建组件，并通过 `export const Xxx = defineComponent({...})` 导出多个具名组件，再统一从该文件 import。这是官方支持且稳定的多组件打包方式。
• 避免混合 script 类型 → 不要混用 `<script>` 和 `<script setup>`</script>：
  二者互斥。选其一即可；推荐统一使用 `<script setup>`，更简洁、性能更好、类型更友好。</script>

常见误区提醒

有人尝试用动态 import 或内联 `<script>` 标签模拟多脚本，这些做法均无效：</script>

立即学习“前端免费学习笔记（深入）”；

• HTML 中的 `<script>` 标签在 `.vue` 模板里仅作渲染内容，不会执行 JS 逻辑；</script>
• 在 `
• 用注释包裹、条件编译等方式“隐藏”第二个 `<script>`，构建工具仍会扫描并报错。</script>

总之，这不是限制，而是约束带来的确定性——强制你把关注点分离得更清晰：逻辑归 composables，视图归模板，组件复用归命名导出。结构反而更健壮、可测试、易维护。