Vue2迁移Vue3：如何继续使用拆分的模板文件？

问题原因 #

你遇到的报错源于Vue3的编译规则限制：当组件中存在<script setup>时，普通<script>不能使用src属性——两者必须被编译器一同处理，无法分开加载外部脚本文件。

可行方案 #

方案1：合并所有脚本逻辑到<script setup>文件 #

这是最直接的解决方式，把原public-main.js中的内容迁移到public-main-setup.js中，用Vue3的Composition API写法替代原来的Options API：

1. 修改public-main.vue，移除独立的<script>标签：

<template src="./public-main.html" lang="html"></template>
<script setup src="./public-main-setup.js"></script>
<style src="./public-main.scss" lang="scss"></style>

2. 迁移原脚本内容到public-main-setup.js：
   比如原public-main.js的Options API代码：

export default {
  props: {
    title: String
  },
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

改成Composition API写法：

import { ref } from 'vue'

// 定义props
const props = defineProps({
  title: String
})

// 定义响应式数据
const count = ref(0)

// 定义方法
const increment = () => {
  count.value++
}

方案2：在普通<script>中导入外部脚本（不使用src） #

如果不想完全迁移原脚本内容，可以把原public-main.js作为模块导入到内联的普通<script>中，同时保留<script setup>：

<template src="./public-main.html" lang="html"></template>
<script>
// 导入原脚本内容，根据原脚本的导出方式调整处理逻辑
import componentOptions from './public-main.js'

export default {
  ...componentOptions,
  // 可补充其他Options API选项
}
</script>
<script setup src="./public-main-setup.js"></script>
<style src="./public-main.scss" lang="scss"></style>

注意：这种方式下，原脚本的Options API会和<script setup>的逻辑合并生效，需确保两者没有冲突（比如重复定义props、data等）。

方案3：使用Vue3的普通<script>替代<script setup>（可选） #

如果暂时不想用<script setup>，可以继续使用普通<script>的拆分写法，把原public-main.js和Composition API逻辑合并到一个脚本文件中：

<template src="./public-main.html" lang="html"></template>
<script src="./public-main.js"></script>
<style src="./public-main.scss" lang="scss"></style>

然后在public-main.js中使用Composition API的setup选项：

import { ref } from 'vue'

export default {
  props: {
    title: String
  },
  setup(props) {
    const count = ref(0)
    const increment = () => count.value++

    return {
      count,
      increment
    }
  }
}

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