研发一个商城APP制作底部tabbar的时候运行不了，如何解决？

Question

研发一个商城APP制作底部tabbar的时候运行不了

报错图片如下：

报错地方如下：

<script>
    export default {
        onLaunch: function() {
            console.log('App Launch')
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>

<style>
/*每个页面公共css */
@import"common/uni.css";
@import"common/common.css";

操作环境为HBuilder、uni-app

尝试过很多次换一个思路做tabbar但是每一个方法都出现类似的报错，上网搜显示看不懂，我没用过vite,也重启过电脑，还是没有什么role

“单击外部，按 Esc 键，或修复要关闭的代码。
您还可以通过在 vite.config.js 中将 server.hmr.overlay 设置为 false 来禁用此覆盖。 ”

我想成功制作自己的底部导航，希望哪位可以帮帮我，已经改了几天了还是不知道错在哪里

Answer 1

引自免费微信小程序：皆我百晓生

从你提供的错误信息来看，问题出在两个方面：

1. 缺少结束标签: 报告指出在<style>标签前缺少一个结束标签。这通常意味着在<script>部分可能有未闭合的标签或者语法错误。
2. CSS解析错误: 第二个错误与CSS有关，提到期待一个伪类或伪元素，但实际却没有提供，这可能是因为CSS导入语句的格式不正确。

针对这些问题，你可以尝试以下步骤来解决：

解决方案

1. 确保所有标签正确闭合

检查你的<script>部分，确保所有的大括号{}、函数定义等都正确闭合。根据你提供的代码片段，看起来这部分是正确的，但为了保险起见，再次确认无误。

2. 修改CSS导入语句

错误提示中提到的CSS导入格式问题，通常是因为引号的使用不规范。确保你的@import语句正确使用了双引号"或单引号'包围URL路径。修改如下：

<style>
/*每个页面公共css */
@import "common/uni.css";
@import "common/common.css";
</style>

确保common/uni.css和common/common.css这两个文件确实存在于相对应的路径下。

完整修改后的代码段

<script>
export default {
    onLaunch() {
        console.log('App Launch');
    },
    onShow() {
        console.log('App Show');
    },
    onHide() {
        console.log('App Hide');
    }
}
</script>

<style>
/*每个页面公共css */
@import "common/uni.css";
@import "common/common.css";

其他可能的注意事项

• 环境配置: 如果问题仍然存在，考虑检查你的开发环境配置，特别是关于Vite的配置。虽然你提到没有直接使用Vite，但HBuilder X内部可能采用了Vite作为构建工具，因此某些配置可能会影响到编译过程。
• 依赖更新: 确保所有依赖都是最新版本，有时候依赖包的兼容性问题也会导致这类错误。
• 清除缓存: 尝试清理项目缓存，包括HBuilder X的缓存以及Node_modules目录，然后重新安装依赖。

如果以上步骤都无法解决问题，建议查看项目的其他配置文件，如vite.config.js（如果有的话），确保其中没有配置错误，或者尝试创建一个新的uni-app项目，逐步添加你的代码来定位问题所在。