常见的项目报错以及解决方案小结

在 Vue 项目中，常见的报错包括但不限于以下几种：

1. Vue 模板编译错误：这通常表示你在模板中使用了无效的语法或表达式，比如未关闭的标签、错误的指令使用等。
2. JavaScript 运行时错误：这可能是由于未定义的变量、空数组或对象引起的，也可能是由于调用不存在的方法或属性引起的。
3. Vue 组件错误：这可能是由于组件引用错误、组件命名错误、未导入或注册组件等导致的。
4. API 请求错误：在使用 Vue 的过程中，如果与后端进行数据交互时出现错误，常见的问题包括请求超时、404 错误、500 错误等。
5. Vue Router 错误：当使用 Vue Router 进行路由管理时，常见的报错包括路由未定义、路由参数错误等。
6. Vuex 状态管理错误：如果在使用 Vuex 进行状态管理时出现问题，可能是由于模块命名错误、未定义的 getter 或 mutation 引起的。
   这些只是一些常见的错误类型，具体错误还需要根据具体情况进行排查和解决。在开发过程中，可以通过查看浏览器控制台输出、阅读错误提示信息以及查阅文档等方式来解决问题。

具体问题：
1、await is only valid in async functions and the top level bodies of modules
解决方案：await只在异步函数和顶级模块体中有效,设置async

2、打包成dist文件以后，index.html加载空白
没有修改config配置文件，直接打包，系统默认的是’/’（根目录），而不是’./’（当前目录）,从而导致路径不对，页面加载不出来。
针对vue-cli3.0以下版本的可以直接将config/index.js文件的assetsPublicPath: ‘/’;改为assetsPublicPath: ‘./’; 然后再重新打包一次就可以了。

对于vue-cli3.0及以上版本没有config配置文件的。需要自己在项目的根目录下手动建一个配置文件并添上以下代码：然后在重新打包一次就可以了

javascript module.exports = { publicPath: './' }

经过上面的操作后，我点击导航栏它是这样子的：

经过各种排查，各种寻找答案发现我开发时路由的方式选的不同，才导致这样。
具体解决办法：将router中的index.js 中的mode: "history"注释掉，然后再重新打包即可

![在这里插入图片描述](https://img-blog.csdnimg.cn/c8c2cd5b7f334f57bfd4802ab270b04a.png