如何在Vue中解决从HTML文件返回Vue文件的问题？

作者站长头像
站长
· 阅读数 7

一开始在浏览器运行Vue文件还可以的，之后写了HTML文件并运行后发现无论如何都无法回到原来的Vue文件了

<!--message.vue-->
<template>
    {{ message }}
</template>
<script setup>
    let message = 'happpy birthday'
    setTimeout(() => {
        console.log('stringBeforeUpdate:'+ message)
        message = 'HAPPY BIRTHDAY'
        console.log('stringAfterUpdate:'+ message)
    }, 3000);
</script>
<!--main.js-->
import { createApp } from 'vue'
import './style.css'
import App from './components/message.vue'

createApp(App).mount('#app')
<!--index.html-->
<html>
    <body>
        <h1>11</h1>
    </body>
</html>

尝试：

1、更改main.js文件的import App from './components/message.vue'
2、删除index.html

结果：

1、能运行回原来的message.vue
回复
1个回答
avatar
test
2024-06-20

我看你main.js中试图往id往app的元素上挂载应用，所以是不是你index.html没有<div id="app"></div>节点导致的呢？

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容