Vue 的单文件组件（.vue 文件）script 标签的使用说明

在 Vue 的单文件组件（.vue 文件）中，最多可以编写 2 个 <script> 标签，但需要满足特定条件：

---

1. Vue 3 的情况（主流用法）

从 Vue 3.2+ 开始，官方支持以下两种形式共存：

vue

<script>
// 普通 script (选项式 API / 非 setup 的逻辑)
export default {inheritAttrs: false, // 可声明普通选项customOptions: {} // 自定义配置
}
</script><script setup>
// 组合式 API 的 setup 语法糖
const msg = "Hello World"
</script>

两个 <script> 需要使用相同的语言脚本

vue

<script lang="ts">

</script>

<script setup lang="ts" name="SampleInput">

</script>

规则：

• 最多 1 个普通 <script>（不带 setup）

• 最多 1 个 <script setup>（带 setup 属性）

• 顺序不限，但两者逻辑会合并到组件中

---

2. Vue 2 的情况

传统 Vue 2 的 .vue 文件通常 只能有 1 个 <script> 标签，用于定义组件选项：

vue

<script>
export default {data() { return { msg: "Hello" } }
}
</script>

---

3. 其他注意事项

1、两个 <script> 需要使用相同的语言脚本

2、import必须在顶部，可以集中在任意一个<script>的顶部，也可以分散在两个<script>的顶部

3、export必须在没有setup的 <script> 中

vue

<script lang="ts">import { reactive } from "vue";export const applySampleListSymbol = Symbol("applySampleList");</script><script setup lang="ts" name="SampleInput">import { ref } from "vue";......</script><template></template><style scoped lang="scss"></style>

若使用 不同语言脚本（需构建工具支持），可通过 lang 属性区分多个 <script>，但实际开发中极少需要这么做：

vue

<script lang="ts">
// TypeScript 逻辑
</script><script lang="js">
// JavaScript 逻辑
</script>

---

总结

Vue 版本	最多 script 数量	条件
Vue 3	2	1 个普通 + 1 个 setup
Vue 2	1	无特殊属性

实际开发中推荐保持单一 <script>（或 setup）以保证代码可维护性。若有特殊需求（如混合选项式与组合式 API），才使用双 script 模式。