<script setup lang="ts"> 中再包含 <script src="..."> 报错的解决方案</script>

在 vue 中使用 <script setup lang="ts"> 组件时，如果再包含一个 <script src="..."> 引用外部脚本，可能会出现错误。这是因为 <script setup> 组件必须与外部脚本同时处理。</script>

错误提示：

error <script> cannot use the "src" attribute when <script setup> is also present because they must be processed together. 

解决方案：

python-flask-vue-creator

创建 Flask + Vue.js 全栈项目，采用单端口架构、uv 依赖管理、结构化日志和生产级前端设计。当用户要求以下操作时触发：创建新的 Flask+Vue 项目、搭建 Web 应用、构建全栈 Python+Vue 应用、初始化 Flask Web 项目、设置单端口 Flask 前后端项目。触发词：新建项目、创建项目、搭建项目、Flask项目、Vue项目。

下载

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

为了解决此错误，可以使用 vue use - usescripttag 插件来动态导入外部脚本。

import { useScriptTag } from '@vueuse/script-tag'

const scriptUrl = '...'

setup() {
  useScriptTag(scriptUrl)
}

通过使用 usescripttag 插件，可以在组件渲染之前动态导入外部脚本，从而避免与 <script setup> 组件的冲突。</script>