Vue项目启动后无法显示组件，如何排查？-js教程-PHP中文网

Vue项目启动后无法显示组件，如何排查？

心靈之曲

发布： 2025-03-01 23:04:10

原创

682人浏览过

vue项目启动后无法显示组件，如何排查？

Vue项目启动后组件无法显示的排查与解决

本文分析一个Vue项目启动后无法显示组件的问题。开发者原先能正常运行Vue文件，但在创建并运行HTML文件后，却无法返回Vue组件界面。问题涉及message.vue、main.js和index.html三个文件。

问题描述: Vue项目启动后，预期显示message.vue组件，但实际未显示。

代码示例:

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

message.vue:

<template>
  <p>{{ message }}</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2140">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680088878918.png" alt="芦笋演示">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2140">芦笋演示</a>
                            <p>一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="芦笋演示">
                                <span>34</span>
                            </div>
                        </div>
                        <a href="/ai/2140" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="芦笋演示">
                        </a>
                    </div>
                
</template>

<script>
export default {
  data() {
    return {
      message: 'happpy birthday'
    };
  },
  mounted() {
    setTimeout(() => {
      console.log('stringbeforeupdate:' + this.message);
      this.message = 'happy birthday';
      console.log('stringafterupdate:' + this.message);
    }, 3000);
  }
};
</script>

登录后复制

main.js:

import { createApp } from 'vue';
import './style.css';
import App from './components/message.vue';

createApp(App).mount('#app');

登录后复制

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue App</title>
  </head>
  <body>
    <h1>11</h1>
    <div id="app"></div> </body>
</html>

登录后复制

问题分析与解决:

开发者通过修改main.js中的导入路径以及删除index.html文件进行排查，最终发现只有修改main.js的导入路径才能恢复显示message.vue组件。

问题的根源在于main.js中的createApp(App).mount('#app');这行代码。它尝试将Vue应用挂载到ID为app的元素上。而最初的index.html文件中缺少<div id="app"></div>这个元素。因此，Vue应用无法正确挂载，导致组件无法显示。

解决方案: 在index.html文件中添加<div id="app"></div>元素即可解决此问题，如上代码示例所示。添加此元素后，Vue应用将正确挂载到该div中，从而显示message.vue组件的内容。

以上就是Vue项目启动后无法显示组件，如何排查？的详细内容，更多请关注php中文网其它相关文章！