问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
Молчаливый
    31
    新手上路，请多包涵

    一开始在浏览器运行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
    vue.js前端javascript
    阅读 521
    avatarAI BotBETA

    在Vue项目中，main.js 文件通常是应用程序的入口点，它负责创建Vue应用并挂载到指定的DOM元素上。在你的例子中，main.js 文件中导入了message.vue 组件，并将其挂载到id为app的DOM元素上。

    要解决这个问题，确保index.html文件中有一个id为app的DOM元素，这样Vue应用才能正确地挂载到这个元素上。此外，index.html文件还需要引入生成的JavaScript文件（通常是main.js或构建工具生成的输出文件）。

    以下是一个基本的index.html文件示例，其中包含了id为app的DOM元素和main.js文件的引用：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue App</title>
</head>
<body>
    <!-- Vue App will be mounted here -->
    <div id="app"></div>

    <!-- Include the generated JavaScript file -->
    <script src="./main.js"></script>
</body>
</html>

    确保index.html文件与main.js文件和message.vue文件在同一目录下，或者根据文件的实际路径调整<script src="./main.js"></script>中的路径。

    如果你的项目使用了构建工具（如Vue CLI、Webpack等），则构建过程会自动处理文件引用和打包，你只需在构建后打开生成的index.html文件即可。

    如果你在尝试更改main.js文件中的import App from './components/message.vue'后仍然无法运行回原来的message.vue，请确保message.vue文件的路径是正确的，并且文件名和大小写也是正确的。

    总结来说，要解决这个问题，请确保：

    1. index.html文件中有一个id为app的DOM元素。
    2. index.html文件中正确引用了main.js文件。
    3. main.js文件中正确导入了message.vue组件，并且路径是正确的。

    如果你按照这些步骤操作后仍然遇到问题，请提供更多的代码和错误信息，以便更准确地诊断问题。

    1 个回答
    得票最新
    头像
    热饭班长
      3.7k20240348
      ✓ 已被采纳

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

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题