解决报错：Invalid component name layouts default.vue . Component names should conform to valid custom element name in html5 specification.

vue-router升级版本后，使用$router进行跳转时，将返回一个promise对象，这其实是好事，但是除了这个，官方对报错也做了调整。这里先看一下常见一个重定向错误：为什么产生这个错误，我在谷歌查了下，有这么一个解释：这是设计使然。为什么？阅读此评论。TL;DR：假设您在页面 A，然后单击一个按钮将您带到页面 B（有点像method: goToB() { router.push('/B'); }页面 A）。但是页面 B有一个导航守卫，将您发送到页面 C。此错误是让该goToB()功能知道路由器无法完成所需任务并且用户尚未登陆的一种方式/B。这很讨厌，但信息量很大这里最大的困惑是重...

按需加载，在gzip面前根本不值一提，当然，该优化还是要优化，所以在使用了lodash-webpack-plugin插件后，在使用个别方法后就会出现问题，比如：unionBy;原因按需加载的插件，它的按需就是将你调用的方法单独提取出来，但是，如果提取的方法里面还用了其他方法，他可能无法识别，导致方法缺失，所以就会报错。报错代码<script> import _ from "lodash"; export default { methods: { test(arr){ return _.unionBy(arr, "key&...

nuxt嘴上说很快，但是其实热编译是很慢的，很墨迹，和vue cli这种对比起来，差了很多，经常改动一点东西想要看效果，编译要等一段时间。今天无聊去看了下nuxt模块库，看到这么一个插件：nuxt-build-optimisations有点牛皮，使用后，热编译速度肉眼可见的提升，官方的介绍说可以提升2-5倍的速度，实际测试中，冷启动速度没太大感觉，但是热编译速度确实是很满意。特此推荐！用法yarn add nuxt-build-optimisations安装完毕去nuxt.config.js里面激活模块export default { buildModules: ['nuxt-bui...

在nuxt中，有一个专门的axios版本：@nuxtjs/axios；但是由于nuxt的文档，或者说是资料不是很齐全（零散），初步了解后觉得这个插件并不是很方便，很多时候，我们都是模块化的axios写法，在使用@nuxtjs/axios时，会发现有点束手束脚，于是转而放弃使用，而是单独引入axios，然后一顿操作。当我们单独封装axios的时候，有没有这种想法：报错了能不能跳转到nuxt的错误页面？；但是实现时发现，除了在asyncData这些方法里面可以解构到error对象然后利用它跳转，好像在单独的一个js文件里面，没办法直接跳转。但是，如果我们使用@nuxtjs/axios，那么我...

全局混入我考虑到可能会有多个混入，如果把混入的内容全部写在同一个js文件里面，那是非常混乱的，所以我采用模块化的写法，其实就是导入导出而已，一种方式。具体用法和全局过滤器一样，创建插件，激活插件。在plugins目录下创建mixins文件夹，mixins里面创建一个index.js作为入口文件，然后再创建一个modules目录，用来存放mixin混入的方法。假设我们在modules/test.js下写了一个混入export default { methods: { test(){ console.log("我是一个全局混入方法"); }...

nuxt 不能像传统的vue那样直接在main.js文件中添加全局过滤器，我们需要写一个插件，并在nuxt.config.js中启用在plugins目录下创建一个filters.js文件夹filters.jsimport Vue from "vue"; // 无内容占位符 Vue.filter("placeholder", (value) => { if (!value && value !== 0) return "--"; return value; });nuxt.config.jsexpo...

出现这个问题，往往是因为浏览器中的虚拟dom树和服务端dom不一致产生的，为什么会不同，举个例子：我们v-if判断客户端是否存在localstorage.getItem("token")，但实际上服务端永远不可能拿到，因为localstorage是浏览器客户端才有的东西。那么服务端渲染的dom永远没有，你浏览器上又有了，那不是就产生冲突了。于是就会报这个错，但是并不会影响页面的渲染。解决的办法就是将这个v-if放到客户端才进行运行，nuxt提供了一个自定义标签：client-only表示在这个标签内的内容，只有有客户端才会渲染运行，这样就可以让虚拟dom保持一致，且不...

由于nuxt无法配置路由信息，所以我们常用的配置路由meta信息的路子就走不通了。nuxt官方也有对应的解决方案，大概流程如下：创建一个路由中间件auth，用于判断在对应的页面使用对应的路由中间件auth当用户进入该页面时，auth进行判断：重定向还是报错那么中间件怎么写就需要了解一下了。有token才允许进入页面在middleware目录创建一个auth.js文件auth.js：export default function ({ store, error }) { if (!store.state.user.token) { error({ message: ...

老规矩，还是使用vue-peristedstateyarn add vue-peristedstate --dev安装完毕，在plugins目录创建一个localStorage.js文件localStorage.js：import createPersistedState from 'vuex-persistedstate' export default ({ store }) => { createPersistedState({ storage: localStorage, reducer(val) { return { // ...

在使用vant框架的时候，一般都是使用rem自动适配，这个东西有好有坏，具体就不细说，我们这次处理的问题就是使用了rem适配，他样式第一次加载闪烁的问题。其实出现这个问题，大多数都是使用了plugins插件的方式加载rem适配。具体如下：在plugins目录下创建了lib-flexible.js文件，文件名随意打开文件，在里面写入import 'amfe-flexible'打开nuxt.config.js，在plugins中加入代码{ src: '@/plugins/lib-flexible', mode: 'client' },//rem适配这样的确可以使用，但是却产生了首次加载样式会...