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

在 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: ‘./’; 然后再重新打包一次就可以了。
常见的项目报错以及解决方案小结_第1张图片

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

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

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

常见的项目报错以及解决方案小结_第2张图片

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

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

常见的项目报错以及解决方案小结_第3张图片

你可能感兴趣的:(遇到的各种报错及解决方案,vue,vue.js,前端,javascript)