概述 在用nuxt开发服务端渲染项目并引入第三方库的时候,经常会遇到window或document未定义的情况,原因是这个第三方库里面用到了window或者document,然后在服务端打包的时候,node环境并没有window或者document,所以就报了window或document未定义的错误. 而且,我们在引入第三方库的时候,并不希望把第三方库打包进app.js,而是希望这个第三方库只在需要的页面才加载. 下面以tinymce这个第三方库为例,记录我在nuxt.js框架中的实现方法,供

在开发nuxt项目的时候,我们难免会使用到document来获取dom元素.如果直接在文件中使用就会报错.这是因为document是浏览器端的东西服务端并没有. 解决方法: 我们只需要在使用的地方通过process.browser/process.server来判断 如下: if (process.browser) { let myVideo = document.getElementById('mini_video'); if (myVideo) { if (!this.videoShow)

因为用了VUE做的官网,既然是官网了避免不了SEO的问题了(该死当初就不应该选择用vue) 很自然就是选择了使用nuxt.js来做ssr预渲染了. 因为网站不是响应式的,PC / 移动端要进行对应跳转,故使用了 window.οnresize 监听窗口变化 然鹅..... window is not defined     ***  碰到这种报错,是由于nuxt.js会在服务端渲染页面,而服务端并没有window或document  ***    官方给出的解决方案如下: so.... if (

官方文档中已经给出解决方案: 实际操作也比较简单,比如我之前在项目中引入的wangeditor,这个插件里包含了navigator内容 解决:现在nuxt.config.js的webpack扩展配置中配置一个vendor用于打包客户端执行的代码 这个vendor: ['external_library']里的external_library名字随便写,对配置没有影响 我用wangeditor开始直接复制的里边代码是这样的,里边标红的是只能在客户端执行的代码 改造以后是这样的

1.window or document is not undefined // .vue 页面 if (process.browser) { var Distpicker = require('v-distpicker') Vue.use(Distpicker) Vue.component('v-distpicker', Distpicker) } // nuxt.config.js build: { vendor: ['v-distpicker'] } 这样会报错:[Vue warn]: T

前言 哈喽大家周一好,今天的内容比较多,主要就是包括:把前端页面的展示页给搭出来,然后调通接口API,可以添加数据,这两天我也一直在开发,本来想一篇一篇的写,发现可能会比较简单,就索性把项目搭建的过程简化,一次写好了,在开发 Nuxt.js 框架的过程中,我发现相比之前还是有些变化的,如果你是读过我第一个前后端分离系列的小伙伴,可能看过我简单说过Nuxt框架的一些知识<Nuxt.js 是什么?>,我发现现在在项目搭建的过程中,已经优化了一些功能,今天就重头搭建一下. 如果你没有看过之前的文章,

服务端预渲染之Nuxt - 使用 现在大多数开发都是基于Vue或者React开发的,能够达到快速开发的效果,也有一些不足的地方,Nuxt能够在服务端做出渲染,然后让搜索引擎在爬取数据的时候能够读到当前页面. 首先要说明一点,我们可以认为我们所编写的Vue项目是一个服务端的项目,虽然编写的还是Vue项目,但是Nuxt是基于服务器环境的. 就简单的说一下Nuxt使用.基础只是还是以官方文档为主,如果博客中哪里有问题,欢迎留言指正. 说了这么多,进入正题. 路由 与传统的Vue项目不同的是,我们在使用

SSR: 服务端渲染(Server Side Render),即:网页是通过服务端渲染生成后输出给客户端. 一.那为什么要使用SSR呢? 我用一句话理解的就是降低SPA(Single Page Application)首屏渲染的时间,解决SPA不利于SEO(Search Engine Optimization)的优化. 那Nuxt是什么呢?跟SSR有什么关系呢? Nuxt.js 是一个基于 Vue.js 的通用应用框架. 通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的

一.创建项目 1.使用如下命令生成项目 vue init nuxt-community/starter-template testPro --testPro为项目名称 2.进入到项目根目录下,使用npm install 安装依赖 3.npm run dev 在开发环境下运行项目 二.修改项目的host 和 port 在package.json文件中新增如下代码: "config": { "nuxt": { "host": "0.0.0.

nuxt.js 追求完美,相信大家都是这样的.因为前后端分离的弊端性,在项目构建时,浏览器并不会捕捉到项目的内容,所以开始,笔者决定引入nuxt.js文件来配合vue完成Server Slider Render博客系统开发.服务端渲染以下简称SSR,不知道nuxt的童鞋可以去nuxt官网了解一哈. 声明:一下代码案例结合vue理解. 第三方插件的使用? 刚入坑,感觉寸步难行.想运来的使用方式,编辑器并不会报错.但是浏览器却报的nuxt错误. 后来经过几十根头发的代价换来了插件的正确使用方式 de

nuxt.js第三方插件的使用?路由的配置pages目录自动生成路由layoutsdefault.vueerror.vueVuex的使用权限篇Mysqladvice nuxt.js 追求完美,相信大家都是这样的.因为前后端分离的弊端性,在项目构建时,浏览器并不会捕捉到项目的内容,所以开始,笔者决定引入nuxt.js文件来配合vue完成Server Slider Render博客系统开发.服务端渲染以下简称SSR,不知道nuxt的童鞋可以去nuxt官网了解一哈. 声明:一下代码案例结合vue理解.

之前线上的项目是nuxt build后的项目发布在服务器上,pm2来管理node的进程,nuxt还是运行在node的环境里. 这个方案用了半年左右,访问速度什么的确实很快,pm2管理下的node在windows服务器上运行也很完美 唯一不足的地方是,个人感觉还是很麻烦,还是想拷贝文件就能解决问题的最好了,所以,用了generate 具体使用教程请移步官方教程:https://zh.nuxtjs.org/api/configuration-generate generate用完后其实遇到的问题还是

原文链接 Vue 开发一个单页面应用,相信很多前端工程师都已经学会了,但是单页面应用有一个致命的缺点,就是 SEO 极不友好.除非,vue 能在服务端渲染(ssr)并直接返回已经渲染好的页面,而并非只是一个单纯的 <div id="app"></div>. Nuxt.js 就是一个极简的 vue 版的 ssr 框架.基于它,我们可以快速开发一个基于 vue 的 ssr 单页面应用. 安装 Nuxt.js 官方提供了一个模板,可以使用 vue-cli 直接安装.

vue.js的官方介绍里可能提到过nuxt.js,我也不太清楚我怎么找到这个的 最近项目vue.js是主流了,当有些优化需求过来后,vue还是有点力不从心, 比如SEO的优化,由于vue在初始化完成之前,页面是没有任何内容的,所以基本上没有办法满足这个需求 比如有些访问量较大的主页里面,由于都是异步数据,所以在服务器数据没有返回之前,可能只能无奈的显示一个loadding....但是产品没办法理解这里面的技术流,他们只知道,能不能更快一点,甚至不用loadding~ 我在vue这个环境下能做的:

npm install weixin-js-sdk --save 这个不行,这个是vue前端用的 网上找了一些vue jsweixin的案例 不能直接用 因为nuxt是后端运行,windows对象取不到,通过查找到了一个可用的案例 就是把js注入到前端 其中jssdkInfo和要分享的appid,noncestr等参数要去接口后端请求过来,核心代码复制如下: wxInit(){ const script = document.createElement('script'); // 返回一个独立的

脚手架工具 create-nuxt-app 创建项目: $ npx create-nuxt-app <项目名> 启动项目: To get started: cd nuxt_demo npm run dev To build & start for production: cd nuxt_demo npm run build npm start nuxt 命令介绍 命令列表 "scripts": { // 只查看不符合规范的代码 "lint": &

我已经放弃百度地图了,为什么呢? 原因一: 百度地图api太乱不容易查阅 原因二: 百度给出的案例太少,可参考项太少 第三点也是最重要的,百度地图花钱,百度地图花钱,百度地图花钱, 很荣幸,作为国内唯一免费开源大型好用的高德地图成为我的第二个采坑对象. 说说我为什么用nuxt:其实出于私心,我想调研一下nuxt的seo,踩踩nuxt的坑,熟悉一些框架工作流程,以便于后续项目开发: 还有一点是我想把地图抽离出来,来满足公司的各种业务. 好吧,进入正题: 首先,安装nuxt框架: npx creat

零.前言 最近参与了一个立足 seo 的移动端项目,公司前端工程主栈 vue,所以理所当然的用上了 nuxt,UI 主要选择了 Vant.   一.公共列表页的缓存 公共列表页由于数据量较大,故需要滚动触发分次加载以模拟分页,当客户端加载到了一定页数之后(>= 2),点击某条数据进去查看详情,然后返回列表页,这时候如果没有缓存的话,列表页会按照初始参数(即从分页 1 开始)发请求拉数据,并且丢失浏览位置.一方面,浪费请求资源,另一方面,用户体验不佳.因此,针对这两个问题,最后决定开启缓存. vu

博客地址: https://www.seyana.life/post/17 具体账号注册方法和绑定方法可以去到官网下,都有相应的指南, 一般设置也比较简单,只需要把对应js代码添加到head中即可, 这里主要是在Vue中使用Nuxt plugin添加这些信息,并且在后台管理analyze id. 百度analyze,其中baidu_analyze是我的id /* eslint-disable */ export default ({ app, store }) => { /** * 只在生产环境

一.项目简述 nuxt-chatroom 基于Nuxt.js+Vue.js+Vuex+Vant+VPopup等技术构建开发的仿微信|探探App界面社交聊天室项目.实现了卡片式翻牌滑动.消息发送/emoj表情.图片/视频预览.下拉刷新消息.红包/朋友圈等功能. 预览片段 二.技术栈 编码/技术:Vscode + NuxtJs/Vue/Vuex UI组件库:Vant (有赞移动端vue组件库) 字体图标:阿里iconfont图标库 弹窗组件:VPopup(基于vue封装自定义弹框) 本地存储:coo