nuxtjs踩坑指南

1、nuxt引入问题:Can‘t resolve ‘stylus-loader‘

原因在于没有安装stylus,安装即可:npm install stylus stylus-loader --save-dev

2、nuxt生命周期:

  众所周知,Vue的生命周期全都跑在客户端(浏览器),而Nuxt的生命周期有些在服务端(Node),客户端,甚至两边都在

  生命周期流程图,红框内的是Nuxt的生命周期(运行在服务端),黄框内同时运行在服务端&&客户端上,绿框内则运行在客户端

(1)红框、黄框内的周期都不存在Window对象

export default {
  asyncData() {
    console.log(window) // 服务端报错
  },
  fetch() {
    console.log(window) // 服务端报错
  },
  created () {
    console.log(window) // undefined
  },
  mounted () {
    console.log(window) // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
  }
}

3、配置插件

  所有插件都写在/plugins目录下,这里以vue-lazyload为例:plugins/lazy-load.js

import Vue from ‘vue‘
import VueLazyLoad from ‘vue-lazyload‘

Vue.use(VueLazyLoad, {
  loading: require(‘~/assets/images/loading.jpg‘),
  error: require(‘~/assets/images/error.jpg‘)
})

  然后在nuxt.config.js中添加plugins 配置,这样插件就会在 Nuxt.js 应用初始化之前被加载导入

module.expors = {
  plugins = [
    {
      src: "~/plugins/lazy-load",
      ssr: false
    }
  ]
}

4、使用Axios,并配置全局拦截器,处理跨域

  推荐使用@nuxtjs/axios、@nuxtjs/proxy,不需要在plugins配置:npm install @nuxtjs/axios @nuxtjs/proxy --save

  使用并处理跨域

  /*
  ** Nuxt.js modules
  */
  modules: [
    ‘@nuxtjs/axios‘, // 不需要加入proxy
    ‘@nuxtjs/router‘
  ],
  axios: {
    proxy: true
  },
  proxy: {
    ‘/api‘: {
      target: ‘http://119.3.166.247:8080/‘,
      changeOrigin: true,
      pathRewrite: {
        ‘^/api‘: ‘/‘
      }
    }
  },

  组件中使用axios:需要注意的是组件的fetch和asyncData里只能使用nuxtjs模板里的axios哦,如果使用我们自己引入的axios,是无法使用的

<script>
export default {
  fetch ({ app }) {
    console.log(app.$axios)
  },
  asyncData ({ app }) {
    console.log(app.$axios)
  },
  created () {
    console.log(this.$axios)
  }
}
</script>

  到此为止,我们并不需要在plugins配置axios,但是如果要设置全局拦截器,那么就要新建一个/plugins/axios.js

export default function (app) {
  let axios = app.$axios;
 // 基本配置
  axios.defaults.timeout = 10000
  axios.defaults.headers.post[‘Content-Type‘] = ‘application/x-www-form-urlencoded‘

  // 请求回调
  axios.onRequest(config => {})

  // 返回回调
  axios.onResponse(res => {})

  // 错误回调
  axios.onError(error => {})
}

  然后在plugins配置它,这个是加入到插件plugins里面哟

module.exports = {
  plugins = [
    {
      src: "~/plugins/axios",
      ssr: false
    },
  ]
}

5、如何在 head 里面引入js文件?

  背景:在<head>标签中,以inline的形式引入flexible.js文件。本项目主要为移动端项目,引入flexible.js 实现移动端适配问题。

  Nuxt.js 通过 vue-meta 实现头部标签管理,通过查看文档发现,可以按照如下方式配置:

// nuxt.config.js
head: {
  script: [
    { innerHTML: ‘console.log("hello")‘, type: ‘text/javascript‘, charset: ‘utf-8‘}
  ]
}

  结果,生成 html:<script data-n-head="true" type="text/javascript" charset="utf-8">console.log(&quot;hello&quot;)</script>

  我们发现 vue-meta 把引号做了转义处理,加入 __dangerouslyDisableSanitizers: [‘script‘] 后,就不会再对这些字符做转义了,该字段使用需慎重!接下来,要把 console.log("hello") 的内容替换成 flexible.js,配置升级之后:

head: {
  script: [{ innerHTML: require(‘./assets/js/flexible‘), type: ‘text/javascript‘, charset: ‘utf-8‘}],
  __dangerouslyDisableSanitizers: [‘script‘]
}

6、nuxt项目中的js文件怎么引入vuex中store下的数据

  nuxtjs里的vuex写法与vue不一样,这样在其他js文件无法获取到整个store对象,一直都是undefined。后来经过思考发现,nuxt里的vuex每个文件都是导处state函数,所以考虑下面这样写即可

import { state } from ‘@/store/uuid.js‘
console.log(state().uuid)

原文地址:https://www.cnblogs.com/goloving/p/11347638.html

时间: 2024-10-11 03:06:20

nuxtjs踩坑指南的相关文章

Microsoft SQL Server on Linux 踩坑指南

微软用 SQL Server 在 2016 年的时候搞了一个大新闻,宣传 Microsoft ?? Linux 打得一众软粉措手不及.但是这还是好事情,Linux 上也有好用的 SQL Server 啦,但是从预览版开始 SQL Server on Linux 的配置要求蜜汁高,大部分云主机用户都望而却步.另外,SQL Server on Linux 对于文件系统有限制,仅支持 Ext3 以及 XFS 文件格式系统,对于某些云服务商默认提供的云镜像限制 Ext3 文件格式系统的用户而言也是足够让

appium连接夜神浏览器,踩坑指南。

之前安装了最新版本的appium,怎么都配置不好,连接不成功,后来看了一个博主的帖子换成了“AppiumForWindows_1.4.16.1.zip”,配置环境变量后才成功,分享给踩坑的你,以及为下一次踩坑备份. 原帖请戳:1.https://www.cnblogs.com/fighter007/p/9224773.html    2.https://www.cnblogs.com/fighter007/p/9226730.html 下面截取我自己需要的一部分: 一.安装 appium 工具

tensorflow 1.8, ubuntu 16.04, cuda 9.0, nvidia-390,安装踩坑指南。

被tensorflow 1.8, ubuntu 16.04, cuda 9.0, nvidia-390折磨了5天,终于上坑,留下指南,造福后人. 1.先把依赖搞清楚: tensorflow 1.8依赖cuda 9.0,cuda 9.0依赖nvidia-390. 2.坑: ubuntu 16.04源里只有nvidia-384,nvidia-390太新还没支持. 怎么办? 如果你不在天朝以下可以在个人源中安装nvidia-390 sudo add-apt-repository ppa:graphic

EDM模板编写踩坑指南(非响应式,纯table有源码)

如果问你table布局,你肯定会嗤之以鼻?什么table布局?不是早已经淘汰了吗?但是如果让你写EDM邮件模板,table布局相对来说是最好的选择. 如果让你立刻写EDM,你在网上搜的话,得到的信息相对较少,但是又很懵的话,建议你看看这篇文章,让你30分钟之内入门并开始写, 需要源码再私我吧~ 或许有人会问EDM是什么,Email Direct Marketing的缩写,即电子邮件营销.EDM模板就是你邮箱中的广告邮件,其实就是在邮件中写网页.但是EDM模板怎么书写.如果你在网上搜,或许你会搜到

Java URL类踩坑指南

背景介绍 最近再做一个RSS阅读工具给自己用,其中一个环节是从服务器端获取一个包含了RSS源列表的json文件,再根据这个json文件下载.解析RSS内容.核心代码如下: class PresenterImpl(val context: Context, val activity: MainActivity) : IPresenter { private val URL_API = "https://vimerzhao.github.io/others/rssreader/RSS.json&qu

NuxtJS踩坑日记,一步一步爬出我自己挖的坑。

NuxtJS    2 errors and 2 warnings potentially fixable with the `--fix` option. 第二种报错 Error: No build files found in E:\xiaojin4need\pro_all\ssr\myapp\.nuxt\dist\server.   │ 原文地址:https://www.cnblogs.com/sugartang/p/12315595.html

树莓派4B踩坑指南 - (14)用cups建立家庭局域网共享中心

树莓派在家中至少三个作用:家庭资源共享中心.无线打印服务器.下载服务器. 无线打印服务器用苹果开发的cups实现打印机无线共享. 安装准备 确认自己的打印机型号,稍后会用到.然后照例先更新源. sudo apt-get update 安装 sudo apt-get install cups # 安装cups sudo usermod -a -G lpadmin pi # 将用户pi设为管理员 sudo cupsctl --remote-any # 开启远程访问权限 # cups安装完毕 配置 打

『OGG 01』Win7 配置 Oracle GoldenGate 踩坑指南

安装 Oracle 安装 Oracle11g 32位[Oracle 32位的话,OGG 也必须是 32位,否则会有0xc000007b无法正常启动 错误] 安装目录为 D:\oracle\product\11.1.0\db1 [这个目录要设置为 环境变量 ORACLE_HOME] 设置环境变量 JAVAHOME C:\Program Files\Java\jdk1.8.0121 ORACLEHOME D:\oracle\product\11.1.0\db1 ORACLE_SID ORCL 如何查

spring cloud踩坑指南

版本信息: spring cloud 版本Greenwich.SR2 spring boot 版本2.1.8.RELEASE gateway报错 DefaultDataBuffer cannot be cast to org.springframework.core.io.buffer.NettyDataBuffer 解决方式: springcloud的gateway使用的是webflux,默认使用netty,所以从依赖中排除 tomcat相关的依赖 ,就可以了. 我的问题: 排除了依赖还是报错