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 =
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("hello")</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']
}
nuxtjs踩坑指南的更多相关文章
- Nuxt.js的踩坑指南（常见问题汇总）
本文会不定期更新在nuxt.js中遇到的问题进行汇总.转发请注明出处,尊重作者,谢谢! 强烈推荐作者文档版踩坑指南,点击跳转踩坑指南 在Nuxt的官方文档中,中文文档和英文文档都存在着不小的差异. 1 ...
- Spring WebSocket踩坑指南
Spring WebSocket踩坑指南 本次公司项目中需要在后台与安卓App间建立一个长连接,这里采用了Spring的WebSocket,协议为Stomp. 关于Stomp协议这里就不多介绍了,网上 ...
- C# -- HttpWebRequest 和 HttpWebResponse 的使用 C#编写扫雷游戏 使用IIS调试ASP.NET网站程序 WCF入门教程 ASP.Net Core开发(踩坑)指南 ASP.Net Core Razor+AdminLTE 小试牛刀 webservice创建、部署和调用 .net接收post请求并把数据转为字典格式
C# -- HttpWebRequest 和 HttpWebResponse 的使用 C# -- HttpWebRequest 和 HttpWebResponse 的使用 结合使用HttpWebReq ...
- 树莓派4B踩坑指南 - （15）搭建在线python IDE
今天想在树莓派上自己搭一个在线的python IDE,于是找到了一篇教程--Fred913大神的从头开始制作OJ-在线IDE的搭建 自己尝试动手做了一下, 还是发现不少细节需要注意, 记录在此 如果不 ...
- 正则表达式 test 踩坑指南
正则表达式 test 踩坑指南 test 只能使用一次,第二次返回的是错误结果! reg = /edg|edge/g; /edg|edge/g reg.test(`edg`) true reg.tes ...
- Taro 开发踩坑指南 (小程序，H5, RN)
Taro 开发踩坑指南 (小程序,H5, RN) css taro 如何展示多行文本省略号 https://www.cnblogs.com/xgqfrms/p/12569057.html UI 设计稿 ...
- 小程序 & taro 踩坑指南
小程序 & taro 踩坑指南 微信开发者工具, 不支持 react bug https://github.com/NervJS/taro/issues/5042 solution just ...
- Java 热更新 Groovy 实践及踩坑指南
Groovy 是什么? Apache的Groovy是Java平台上设计的面向对象编程语言.这门动态语言拥有类似Python.Ruby和Smalltalk中的一些特性,可以作为Java平台的脚本语言使用 ...
- 『OGG 02』Win7 配置 Oracle GoldenGate Adapter Java 踩坑指南
上一文章 <__Win7 配置OGG(Oracle GoldenGate).docx>定下了 两个目标: 目标1: 给安装的Oracle_11g 创建 两个用户 admin 和 root ...
随机推荐
- codeforces 1260C. Infinite Fence (数学or裴蜀定理)
只需要验证小间隔在大间隔之间有没有连续的k个 设小间隔为a,大间隔为b,那么a在b之间出现的次数在\(\lfloor \frac{b}{a}\rfloor\)或者\(\lfloor \frac{b}{ ...
- Salesforce 开发整理（一）测试类最佳实践
在Sales force开发中完善测试类是开发者必经的一个环节,代码的部署需要保证至少75%的覆盖率,那么该如何写好测试类呢. 测试类定义格式如下: @isTest private class MyT ...
- C#开发BIMFACE系列29 服务端API之获取模型数据14：获取图纸列表
系列目录 [已更新最新开发文章,点击查看详细] 一个三维模型中可能包含对应多张二维图纸列表,本篇主要介绍如何获取模型文件对应的图纸列表. 请求地址:GET https://api.bimfac ...
- 打造IP代理池，Python爬取Boss直聘，帮你获取全国各类职业薪酬榜
爬虫面临的问题 不再是单纯的数据一把抓 多数的网站还是请求来了,一把将所有数据塞进去返回,但现在更多的网站使用数据的异步加载,爬虫不再像之前那么方便 很多人说js异步加载与数据解析,爬虫可以做到啊,恩 ...
- CSS修改选中文本颜色与背景色
壹 ❀ 引 在做博客美化的时候,想着去修改文本选中的背景色,因为网页默认是蓝底白字,看着与自己博客整体配色不太搭配,所以想着去改改. 贰 ❀ ::selection 解决方案其实很简单,使用css ...
- vue项目里面使用脚手架实现跨域
今天在做vue项目的时候,项目在本地,接口数据在阿里云,这就造成了跨域,在网上找了好久,网上大部分的方法都是找到config文件夹下面的index进行修改的,可是我找到的Index却和他们描述的不一样 ...
- My97Datepicker 日历控件的使用
如果显示中乱码可以再改变lang js包 中的 以防乱码 var $lang = {errAlertMsg: "\u4E0D\u5408\u6CD5\u7684\u65E5\u671F\ ...
- 基于 EntityFramework 生成 Repository 模式代码
借助 WeihanLi.EntityFramework 实现简单的 Repository Intro 很多时候一些简单的业务都是简单的增删改查,动态生成一些代码完成基本的增删改查,而这些增删改查代码大 ...
- XAML属性和事件
1.元素属性 XAML是一种声明性语言,XAML编译器会为每一个标签创建一个与之对应的对象.对象创建出来之后要对它的属性进行必要的初始化之后才有使用意义.因为XAML语言不能写程序运行逻辑,所以一份X ...
- SpringBoot（八） SpringBoot整合Kafka
window下安装kafka和zooker,超详细:https://blog.csdn.net/weixin_33446857/article/details/81982455 kafka:安装下载教 ...