Vue3 script setup模式下如何正确使用src导入外部脚本

问题场景 #

使用Vue3组合式API + <script setup>语法开发单文件组件时，需要将模板、JS逻辑、样式拆分到独立文件维护，以Modal组件为例，预期目录结构分为三类文件：

• 入口.vue文件（Modal.vue/index.vue）：仅存放template模板内容，通过标签属性引入外部JS逻辑与样式文件
• index.js：存放组件全部组合式API逻辑代码
• 样式文件（style.scss/style.css）：存放组件样式代码
  实际开发中出现的问题：给<script>标签添加setup属性后，通过src引入外部index.js时代码无法正常运行。

正确实现方式 #

<script setup>本身原生支持src属性引入外部逻辑文件，运行失败基本是写法不符合SFC规范导致，按以下规则编写即可正常运行。

1. 目录结构 #

components/Modal/
├── index.vue    # 组件入口，仅承载模板与外部资源引入
├── index.js     # 组件setup逻辑
└── style.scss   # 组件样式

2. 各文件编写规范 #

入口文件 index.vue

核心注意事项：

• 引入外部setup逻辑的<script>标签必须同时声明setup和src属性，标签内部不能写任何额外代码
• 外部样式同样通过<style>标签的src属性引入，可正常使用scoped、lang等原有属性
  代码示例：

<template>
  <div class="modal-mask" v-if="visible">
    <div class="modal-wrapper">
      <header class="modal-header">{{ title }}</header>
      <main class="modal-body">
        <slot />
      </main>
      <footer class="modal-footer">
        <button @click="handleClose">关闭</button>
      </footer>
    </div>
  </div>
</template>

<!-- 注意：带src的script setup标签内部不要写任何代码 -->
<script setup src="./index.js"></script>

<!-- 样式引入直接加src属性即可 -->
<style scoped lang="scss" src="./style.scss"></style>

逻辑文件 index.js

这个文件的语法和直接写在.vue文件的<script setup>块内完全一致，不需要额外导出任何内容，可正常使用所有组合式API、defineProps/defineEmits等编译宏：

import { ref } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '提示'
  }
})

const emit = defineEmits(['update:visible', 'close'])

const handleClose = () => {
  emit('update:visible', false)
  emit('close')
}

样式文件 style.scss

和直接写在<style>标签内的写法完全一致，不需要额外特殊处理：

.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;

  .modal-wrapper {
    width: 480px;
    background: #fff;
    border-radius: 8px;
    padding: 20px;
  }
}

常见踩坑排查 #

• 不要在带src属性的<script setup>标签内写任何代码，只要标签内存在内容，src引入就会失效
• 相对路径以当前.vue文件所在目录为基准，注意不要漏写文件后缀
• 使用TS时只需将逻辑文件后缀改为.ts，同时在<script>标签上添加lang="ts"即可，其他写法不变
• 不要在外部JS逻辑文件中手动写export default或export导出，<script setup>的src引入会自动将文件内容作为setup块代码处理，手动导出反而会触发编译错误

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