Vue编译正常但页面仅显示背景无内容，无控制台错误排查求助

核心问题定位 #

你的代码中Main.js存在拼写错误，这是页面只显示背景色的直接原因：

// 错误代码
const app = createApp(Appment);
// 正确写法
const app = createApp(App);

Appment是不存在的变量，Vue无法识别并挂载这个根组件，导致#app容器内没有渲染任何业务内容，仅能看到样式中设置的背景色。

其他优化建议 #

1. 替换原生跳转标签，保留SPA特性
   组件内使用<a href>会触发页面全量刷新，破坏Vue单页应用的特性，建议改用Vue Router提供的<router-link>：

• Comment.vue跳转修改：

  <!-- 原代码 -->
  <a href="/score">
    <button class="scoreboard-button">Check the ScoreBoard Here</button>
  </a>
  <!-- 修改后 -->
  <router-link to="/score">
    <button class="scoreboard-button">查看排行榜</button>
  </router-link>
  

• Score.vue跳转修改：

  <!-- 原代码 -->
  <a href="/comment">
    <button class="Comment-button">Enter your comment here</button>
  </a>
  <!-- 修改后 -->
  <router-link to="/comment">
    <button class="Comment-button">去发表评论</button>
  </router-link>
  

2. 修正API请求地址
   你提到后端是Django，但Score.vue中请求地址为http://localhost:3001/comment，如果Django运行在默认端口（如8000），需要同步修正该地址，避免跨域或请求失败问题。

修正后的Main.js代码 #

import { createApp } from 'vue';
import App from './App.vue'
import router from './router/router';

const app = createApp(App); // 修正拼写错误
app.use(router);
app.mount('#app');

验证步骤 #

1. 修复Main.js中的拼写错误
2. 替换所有<a>跳转标签为<router-link>
3. 重启npm run dev，页面即可正常渲染Comment组件内容

内容的提问来源于stack exchange，提问作者KwaiZher