nuxtjs在vue组件中使用window对象编译报错的解决方法
我们知道nuxtjs是做服务端渲染的,他有很多声明周期是运行在服务端的,以及正常的vue声明周期mounted之前均是在服务端运行的,那么服务端是没有比如window对象的location、navagitor等,以及H5的FormData()方法,所以当你在created之前使用这些时,会报错,那么如何处理呢?
1、自己的写的函数里包含window等
因为nuxt为SSR框架,所以其编译打包时会区分服务端渲染还是客户端渲染(即浏览器),在vue文件中使用window对象报错的原因是,webpack将其加入了服务端脚本中,所以会报错。所以在使用时,应该判断当前代码环境是否是浏览器环境。
官方给出的:process.browser
,通过判断再使用window对象
beforeCreate() {
if (process.browser) {
...
}
},
但是这样有个不好的是,如果判断某个是不是微信浏览器,你通过这种判断那在服务端肯定会一直返回false,到了客服端又不能重置,所以会导致判断出错,所以不是比较好的方法。
最终的解决方案是:将涉及window对象、FormData()等的时候放至mounted生命周期里。
2、第三方插件里包含window等
还有一种就是项目里会引入很多第三方组件,这些组件里也有可能会包含window等一些服务端不支持的内容。
比如我们使用vue-messages第三方组件,引入过后页面报错window is not defined,如何解决这个问题
安装&配置:yarn add vue-messages
plugins目录下放该组件装载文件vue-messages.js
,内容如下:
import Vue from 'vue'
import VueMessage from 'vue-messages'
Vue.use(VueMessage)
将vue-messages.js
文件路径配置到nuxt.config.js
的plugins
属性中,示例如下
module.exports = {
//其它配置项...
plugins: [
{ src: '~/plugins/vue-messages' }
],
//其它配置项...
}
以上就是组件的安装和配置步骤。这几步过后就出现了window is not defined问题。
分析:由于Nuxt是在服务端做的页面渲染,我们引入的很多第三方组件需要用到window对象,而window是浏览器对象,是要依赖浏览器的,所以在做服务端渲染时会遇到window is not defined问题。
遇到这种问题我们如何解决呢?
还好Nuxt提供了解决办法,那就是在plugins配置第三方组件的时候加上ssr: false
属性即可,示例如下:
plugins: [
{ src: '~/plugins/vue-messages' ,ssr: false }
],
ssr设置为false
就是告诉引擎该组件只在客户端引入,不做服务端渲染。
相关文章
- 第三节.vue.js属性与方法
- 【Vue】组件命名报错 “Component name “XXX“ should always be multi-word”的解决方法
- 【Vue】在新电脑部署Vue项目时,遇到的常见错误解决方法
- 【Vue】【子组件】调用【父组件】参数,props属性值【动态】调用的两种方法(图文+完整代码)
- 【Vue】单击click事件综合示例和防冒泡方法
- Vue - 解决 ElementUI / Ant Design Vue 框架组件带有默认回调参数方法时,同时传递默认参数和自定义参数
- Vue安装及环境配置、开发工具
- vue中$set的实现方法
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- vue 组件 子向父亲通信用自定义方法用事件监听
- vue组件传值的方法有哪些
- Vue--名称案例,监听键盘事件@keyup--实时获取数据-----watch属性方法获取
- Vue评论案例--数据存放本地---联系子组件调用父组件方法(子组件点击发表-调用父组件更新评论列表)
- vue中使用watch监听路由导致多次请求问题解决方法
- vue组件通信传值的几大方法及组件通信provide/inject的使用
- 浅析Vue数据更新了但页面不更新的7种情况及vue异步更新带来的数据响应的误解
- Vue 之 插件 轮播组件 vue-awesome-swiper 的简单使用整理
- flask+vue:创建一个数据列表并实现简单的查询功能(一)
- Vue学习第20天——Vue中常用的ajax请求库(axios与vue-rouserce)
- vue:用一个文件配置全局常量/方法和全局组件
- vue 子组件触发父组件方法的两种方式
- vue 登录页背景-粒子特效(Vue-Particles)