初学 vue3+TS，以下代码报错 SyntaxError: Invalid end tag...... 请问怎么解决？

站长

2024年07月16日 09:32 · 阅读数 16

我想在页面中直接显示一段代码，可是发现无法给变量赋值带script标签的代码：选项式写法：

<script lang="ts">
export default{
    data:{
        code8:`<script>console.log("hello world")</script>`
    }
}
</script>

<template>
    <h1>测试页面</h1>
    <div>{{code8}}</div>
</template>

报错：

✓ 8 modules transformed.
[vite:vue] Invalid end tag.
file: /home/code/study-vue/src/components/Test.vue:7:1
error during build:
SyntaxError: Invalid end tag.
    at createCompilerError (/home/code/study-vue/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:18:19)
    at emitError (/home/code/study-vue/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:1573:29)
    at parseChildren (/home/code/study-vue/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:922:25)
    at Object.baseParse (/home/code/study-vue/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:847:23)
    at Object.parse (/home/code/study-vue/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:3057:25)
    at Object.parse (/home/code/study-vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:5061:26)
    at createDescriptor (file:///home/code/study-vue/node_modules/@vitejs/plugin-vue/dist/index.mjs:61:43)
    at transformMain (file:///home/code/study-vue/node_modules/@vitejs/plugin-vue/dist/index.mjs:2212:34)
    at Object.transform (file:///home/code/study-vue/node_modules/@vitejs/plugin-vue/dist/index.mjs:2701:16)
    at file:///home/code/study-vue/node_modules/rollup/dist/es/shared/rollup.js:22748:40

组合式写法：

<script setup lang="ts">
const code8 = '<script>console.log("hello world")</script>'
</script>

<template>
    <h1>测试页面</h1>
    <div>{{code8}}</div>
</template>

报错：

vite v3.2.2 building for production...
✓ 8 modules transformed.
[vite:vue] Invalid end tag.
file: /home/code/study-vue/src/components/Test.vue:3:1
error during build:
SyntaxError: Invalid end tag.
    at createCompilerError (/home/code/study-vue/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:18:19)
    at emitError (/home/code/study-vue/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:1573:29)
    at parseChildren (/home/code/study-vue/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:922:25)
    at Object.baseParse (/home/code/study-vue/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:847:23)
    at Object.parse (/home/code/study-vue/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:3057:25)
    at Object.parse (/home/code/study-vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:5061:26)
    at createDescriptor (file:///home/code/study-vue/node_modules/@vitejs/plugin-vue/dist/index.mjs:61:43)
    at transformMain (file:///home/code/study-vue/node_modules/@vitejs/plugin-vue/dist/index.mjs:2212:34)
    at Object.transform (file:///home/code/study-vue/node_modules/@vitejs/plugin-vue/dist/index.mjs:2701:16)
    at file:///home/code/study-vue/node_modules/rollup/dist/es/shared/rollup.js:22748:40
will@ubuntu-desktop:/home/code/study-vue$ ^C

1个回答

test

2024-07-16

中间的这一段内容需要调整一下：

<script lang="ts">
export default{
  data:{
-   code8:`<script>console.log("hello world")</script>`
+   code8:`<script>console.log("hello world")<\/script>`
  }
}
</script>

相关阅读[[plugin:vite:vue] Invalid end tag. · Issue #6454 · vitejs/vite](https://github.com/vitejs/vit...)

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容