报错window or document is not defined的问题总结

参考：参考1、参考2、官网

关于这类问题通常有两种场景

nuxt中导致document is not defined官方的解释是：一些只兼容客户端的脚本被打包进了服务端的执行脚本中去,并且给出了解决方案通过使用 process.client 变量来判断导入

引用第三方组件时

  • 例如引用vue-awesome-swiper这种的第三方组件时，由于源组件代码中包含有操做window对象，因此这一类的window is not defined按照官方的使用插件的方法引入就能够解决
    • 插件是使用Vue.use(插件)来使用的 ```javascript // 如今plugins目录下新建文件vue-awesome-swiper.js // 这里就以vue-awesome-swiper这个组件为例 import Vue from ‘vue’ import VueAwesomeSwiper from ‘vue-awesome-swiper/dist/ssr’

export default () => { Vue.use(VueAwesomeSwiper) } // 而后在nuxt.config.js文件的css和plugins中添加如下代码 css: [ … { src: ‘swiper/dist/css/swiper.css’ }, … ], plugins: [ …
{ src: ‘~/plugins/vue-awesome-swiper’, ssr: false }， … ], // 这样的话就至关于全局引入了这个组件，在你的.vue文件中就能够直接使用 //

这种样式来使用这个组件

  2.    - 插件是直接引入就可以使用的方式
  3.       - 在plugins/my-plugins.client.js中引入需要的组件，并注册
  4. ```javascript
  5. import Vue from 'vue'
  6. import MarqueeText from 'vue-marquee-text-component'
  7. Vue.component('MarqueeText', MarqueeText)
  1.   - 在nuxt.config.js中添加配置
  1. module.exports = {
  2.   plugins: [
  3.     { src: '~/plugins/my-plugins.client.js',  mode: 'client' }
  4.   ]
  5. }

手写的在window对象上的操作。这种的能够按照官方的方法来写

  1. // 在你的.vue文件中加入
  2. if (process.client) {
  3.  require('external_library') // 这里写操作window对象的代码
  4. }

connect ECONNREFUSED 127.0.0.1:80 at TCPConnectWrap.afterConnect [as oncomplete] 异常的解决

参考：https://www.jianshu.com/p/6507518daf54、https://nuxtjs.org/docs/2.x/features/configuration#edit-host-and-port、https://blog.csdn.net/qq_27068845/article/details/79382850

解决：运行的端口号更改为80

Vue中挂载的方法，实例中拿不到

因为Vue中挂载的方法如果是写在插件中的，则需要这个插件在nuxt的服务端和浏览器都能访问到

解决 启动 报Though the “loose“ option was set to “false“ in your @babel/preset-env config, it will not …

nuxt.config.js

  1.  build: {
  2.     // 解决 启动 报Though the “loose“ option was set to “false“ in your @babel/preset-env config, it will not ...
  3.     babel: {
  4.       plugins: [
  5.         ["@babel/plugin-proposal-private-methods", { "loose": true }]
  6.       ]
  7.     },
  8.  }

在IE浏览器中@click事件无效的问题

因为在Nuxt启动后端服务的控制台使用了console.log，打印了日志，则导致@click无效。Vue生命周期中的created的钩子函数中的输出日志也会打印在Nuxt后端服务的控制台

使用某些插件也会导致@click事件在IE浏览器不可用

在IE浏览器刷新页面不会执行mounted方法

这个问题的本质原因是vue的原理
参考：https://www.jb51.net/article/173601.htm
当用户f5刷新页面时，整个页面会重新去请求，js的状态变量消失，但是el节点并未重新建立。
因为，mounted是el被新创建的vm.$el替换，并挂载到实例上去之后调用的钩子，此处el并未重新挂载，故该钩子函数不会被调用。
此处可以将用户权限判断的方法根据实际情况写在beforeMount或created中

控制台报错Error while initializing app DOMException: Failed to execute ‘appendChild’ on ‘Node’: This node type does not support this method.

参考：https://segmentfault.com/q/1010000016466439

一般在开发环境下，日志会有warning:The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside

, or missing . Bailing hydration and performing full client-side render.
但是不影响使用，而且一般都是在刷新当前页面的时候才会报这个警告。但是一旦build发布到线上就会发生DOMException: Failed to execute ‘appendChild’ on ‘Node’: This node type does not support this method的问题。
解决方案： 直接在疑似产生The client-side rendered virtual DOM tree is not matching server-rendered content问题的代码上包裹一层标签，直接不让后台渲染这部分代码就解决这个问题了