uni-app项目启动后没有报错，但任何平台都显示空白页

发布于 1周前 作者 eggper 来自 Uni-App

uni-app项目启动后没有报错，但任何平台都显示空白页
main.js 文件最后不能写注释！！！
不然就会出现空白页！

像第一张图，最后一行是注释，把最后一行注释删掉，或者换个地方就可以了。

官网文档里关于main.js部分，也没有对此的提醒，真无奈啊~

图片

Harmonyos Next教程
1 回复

针对你提到的uni-app项目启动后没有报错但任何平台都显示空白页的问题，这通常可能是由于多个原因导致的，包括但不限于页面路径错误、组件未正确加载、样式冲突或JavaScript执行错误等。由于你提到没有报错信息，这使得直接定位问题变得更加困难。不过，我可以提供一些常见的排查步骤和代码示例，帮助你定位和解决问题。

1. 检查页面路径配置

确保pages.json中的页面路径配置正确。例如：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
    // 其他页面配置...
  ]
}

确保index.vue文件位于pages/index/目录下，并且文件名大小写正确。

2. 检查App.vue

确保App.vue中正确引入了根组件。例如：

<template>
  <App />
</template>

<script>
import App from './App'

export default {
  components: { App }
}
</script>

3. 检查根组件

确保根组件（如App.vue中引用的组件）正确渲染。例如：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

4. 检查样式文件

确保没有全局样式导致页面内容被隐藏。例如，检查是否有* { display: none; }之类的全局样式。

5. 调试JavaScript

在页面的mounted生命周期钩子中添加console.log语句，检查是否执行到该位置。例如：

<script>
export default {
  mounted() {
    console.log('Page mounted');
  }
}
</script>

6. 清理和重建项目

尝试清理项目并重新构建。在uni-app项目中，你可以使用以下命令：

npm run clean
npm run dev

或者如果你使用的是HBuilderX，可以尝试清理项目缓存并重启开发服务器。

7. 检查控制台和网络请求

在浏览器或开发者工具中检查控制台输出和网络请求，看是否有异常信息或未加载的资源。

通过上述步骤，你应该能够逐步缩小问题范围，并找到导致空白页的具体原因。如果问题依然存在，可能需要更详细的日志信息或进一步的代码审查。

回到顶部