随笔分类 - NuxtJS与SSR服务端渲染/SEO
摘要：一、Nuxt 作用 1、Nuxt 其一目的是为了解决单页面应用的SEO问题，相比于我们平常的 SPA 页面。在搜索引擎中由于无法从网页中被抓取内容信息(SPA页面的信息都是被打包到JS文件中,动态加载到页面中)，从而无法被用户所搜索到。 2、其二是服务端渲染相比于SPA页面渲染，在网络环境较差或者客
阅读全文
摘要：一、nuxt 的智能预读取 Nuxt 2.4中发布了Nuxt.js的一个新特性，称为智能预读取，它与universal mode相结合，提供了更好的用户体验。 使用此功能（默认情况下已启用），当 nuxt-link 路由在视口中可见时（即页面滚动到路由入口元素时），Nuxt.js将自动下载链接目标页
阅读全文
摘要：在公众号深圳湾码农里看的一篇文章：一行可以让项目启动快 70% 以上的代码 - https://mp.weixin.qq.com/s/x8eFAFdTbzlCR1InxZSO2w 一、利用 cache 及 hard-source-webpack-plugin 优化构建速度 1、结果：将项目启动时间从
阅读全文
摘要：一直以为 Nuxt SSR 部署打包之后的文件直接拿出去，node_modules 因为已经存在了，如果不新加依赖，就不需 npm install，就可以重启使用的，原来不是的，简单记录一下吧。 1、问题现象： Nuxt SSR 部署后一般需要 npm install 安装全部依赖，然后再使用 pm
阅读全文
摘要：一、NuxtJS处理因css在服务端渲染而增加源代码量，从而影响到SEO的问题 1、问题背景 关于Nuxt的css嵌入到html代码中的问题，效果如下： 项目很大，这个 css 就会很大，会影响 SEO 的收录。 2、解决方案 解决方案其实很简单：在nuxt.config.js文件中的build对象
阅读全文
摘要：1、部署cdn nuxt build 后的前端资源都会存放在.nuxt/dist/ 文件夹下面 img 目录存放的是使用到的图片资源，无论是开发中存放在 assets 文件夹里的，还是static里的，都会统一生成到该目录里 layouts 目录存放是layout 的布局js pages 目录存放的
阅读全文
摘要：我们知道NUXTJS可以通过路由中间件进行路由鉴权，中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。 但是我在实际使用过程中发现，中间件只有在路由跳转到路由中时才会进入，而在强制刷新网页时是不会进入的。 比如我有这样一个路由 只有角色为sys，或者有event权限的用户才可以访问。如
阅读全文
摘要：spa项目整体迁移转为ssr后，改动之后部署一切还好，就是突然有一天访问人数太多，node进程很容易就挂了自动重启。 最后经过压力测试，考虑到是堆内存溢出的问题，就报错误：FATAL ERROR: CALL_AND_RETRY_0 Allocation failed – process out of
阅读全文
摘要：这个报错也是一直困扰了我许久，服务端一直打印这个报错，但是页面数据响应又都正常，起初真不知道是因为什么原因，能看出来他是在调用80端口， 但是不明白为什么会调用80端口。一度以为是config.js里面配置问题，所以解决的思路就一直在考虑配置方面，端口等方面。 最后发现都没有效果，在网上也查了各种类
阅读全文
摘要：nuxtjs里面集成vuex的创建方式改变了，并且官方不建议以导出Vuex实例的方式创建store，并且会在nuxt3里面删除。这样就会存在一个问题，我怎么像普通vue spa项目一样直接 import store from '@/store'呢？ 虽然官方建议为这个js写一个plugins，然后在
阅读全文
摘要：一、安装 进入apache官网https://www.apache.org/dist/jmeter/binaries下载Windows版本JMeter； 二、配置环境变量 下载之后解压，配置环境变量 控制面板 —— 系统——点击高级系统设置——高级——环境变量——系统变量，创建JMETER_HOME
阅读全文
摘要：我们知道nuxtjs是做服务端渲染的，他有很多声明周期是运行在服务端的，以及正常的vue声明周期mounted之前均是在服务端运行的，那么服务端是没有比如window对象的location、navagitor等，以及H5的FormData()方法，所以当你在created之前使用这些时，会报错，那么
阅读全文
摘要：做过网站优化的朋友都知道，搜索引擎蜘蛛爬行抓取网站时首先会去访问根目录下的robots.txt文件，如果robots文件存在，则会根据robots文件内设置的规则进行爬行抓取，如果文件不存在则会顺着首页进行抓取，那么robots文件的工作原理是什么呢？如何对robots.txt文件进行设置。 rob
阅读全文
摘要：一、搜索引擎工作原理 当我们在输入框中输入关键词，点击搜索或查询时，然后得到结果。深究其背后的故事，搜索引擎做了很多事情。 在搜索引擎网站，比如百度，在其后台有一个非常庞大的数据库，里面存储了海量的关键词，而每个关键词又对应着很多网址，这些网址是百度程序从茫茫的互联网上一点一点下载收集而来的，这些程
阅读全文
摘要：我们知道SPA有很多优点，不过一个缺点就是对(不是Google的)愚蠢的搜索引擎的SEO不友好，为了照顾这些引擎，目前主要有两个方案：服务端渲染(Server Side Rendering)、预渲染(Prerending)。 如果你只需要改善少数页面（例如 首页/, /about, /contact
阅读全文
摘要：服务端渲染应用部署应该先编译构建，然后再启动 Nuxt 服务，可通过以下两个命令来完成： nuxt build nuxt start 我们已经在pakage.json里配置好script命令 { "scripts": { "dev": "nuxt", "build": "nuxt build", "
阅读全文
摘要：vue项目与nuxt.js实在有着太多的不同，例如项目结构变化很大，router.js没了，vuex store写法有变化，router钩子没了等等。老项目毕竟也有一些体量，这么折腾我可接受不了，不过经过一番调查，我发现这些问题不是不可以解决。因此虽然迁移是要迁移的，但是要尽量保持vue-cli 3
阅读全文
摘要：第一种：使用nuxt 提供的 Axios插件 @nuxtjs/axios 1、安装：npm install @nuxtjs/axios -d 安装@nuxtjs/proxy解决跨域问题：npm i @nuxtjs/axios @nuxtjs/proxy -D 2、配置 nuxt.config.js，
阅读全文
摘要：vue-cli项目中，我们可以用vuex-persistedstate，它可以使vuex的状态持久化，页面刷新都不会丢失，原理当然是localStorage啦！当然也可以使用vue-cookies进行保存token，问题来了，nuxt项目怎么保存登录状态呢？当然上面这两种方法我们都可以使用，但是有个
阅读全文
摘要：1、nuxt引入问题：Can't resolve 'stylus-loader' 原因在于没有安装stylus，安装即可：npm install stylus stylus-loader --save-dev 2、nuxt生命周期： 众所周知，Vue的生命周期全都跑在客户端(浏览器)，而Nuxt的生
阅读全文
