Nuxt.js踩坑总结分享


Posted in Javascript onJanuary 18, 2018

构建问题

1. 如何在 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']
}

踩坑成功,下一个坑...

2. 如何使用预处理器

背景:在组件中的<template>, <script> 或 <style> 上使用各种预处理器,加上处理器后,控制台报错。

<style lang="sass">
.red
 color: red
</style>

这个问题解决方法非常简单,只需要安装这些依赖就好。

npm install --save-dev node-sass sass-loader

但是解决过程并不是很顺利的,在阅读中文文档时,忽略版本号,按照上面的提示进行操作,发现不能成功,后来各种debug,最后发现了该解决方案。后知后觉的发现了中文文档的版本号过低,如果需要查看文档,一定要看最新版本的英文文档!

3. 如何使用px2rem

背景:在css中,写入px,通过px2rem loader,将px转换成rem

在以前的项目中,是通过 px2rem loader实现的,但是在Nuxt.js项目下,添加 css loader 还是很费力的,因为涉及到vue-loader。

想到了一个其他方案,可以使用 postcss 处理。可以在 nuxt.config.js 文件中添加配置,也可以在postcss.conf.js文件中添加。

build: {
 postcss: [
  require('postcss-px2rem')({
   remUnit: 75 // 转换基本单位
  })
 ]
},

4. 如何拓展 webpack 配置

背景:给 utils 目录添加别名

刚刚说到,Nuxt.js内置了 webpack 配置,如果想要拓展配置,可以在 nuxt.config.js 文件中添加。同时也可以在该文件中,将配置信息打印出来。

extend (config, ctx) {
 console.log('webpack config:', config)
 if (ctx.isClient) {
  // 添加 alias 配置
  Object.assign(config.resolve.alias, {
   'utils': path.resolve(__dirname, 'utils')
  })
 }
}

5. 如何添加 vue plugin

背景:自己封装了一个 toast vue plugin,由于 vue 实例化的过程没有暴露出来,不知道在哪个时机注入进去。

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

module.exports = {
 plugins: ['~plugins/toast']
}

~plugins/toast.js 文件:

import Vue from 'vue'
import toast from '../utils/toast'
import '../assets/css/toast.css'

Vue.use(toast)

6.如何修改环境变量 NODE_ENV

背景:在项目中,设置 3个 NODE_ENV 的值,来对应不同的版本。development,本地开发;release,预发布版本;production,线上版本。其中,预发布版本比production版本,多出vconsole。

// package.json
"scripts": {
 "buildDev": "cross-env NODE_ENV=release nuxt build && backpack build",
 "startDev": "cross-env NODE_ENV=release PORT=3000 node build/main.js"
 },

打印 process.env.NODE_ENV 依旧是,production。

在 backpack 的源码中,找到了答案,在 执行 backpack build 命令时,会把 process.env.NODE_ENV 修改为 production,并且是写死的不可配置的......

无奈下,只能在 process.env 下,添加 __ENV 属性,代表 NODE_ENV

Nuxt.js踩坑总结分享

这时,在页面中打印出来的信息 process.env.__ENV undefined,但是可以打印出 process.env.NODE_ENV。

可以通过配置 nuxt.config.js 中的,env属性,解决该问题。

env: {
 __ENV: process.env.__ENV
}

开发问题

1. Window 或 Document 对象未定义?

背景: 在引入第三方插件,或者直接在代码中写 window 时,控制台会给出警告,window 未定义。
发生在这个问题的原因时,node服务端并没有window 或 document 对象。解决方法,通过 process.browser 来区分环境。

if (process.browser) {
 // 引入第三方插件
 require('***')
 // 或者修改window对象下某一属性
 window.mbk = {}
}

最后

本文主要在项目中遇到的各种问题,文中有任何表述不清或不当的地方,欢迎大家批评指正。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
js 屏蔽鼠标右键脚本附破解方法
Dec 03 Javascript
Javascript 键盘keyCode键码值表
Dec 24 Javascript
javascript window.opener的用法分析
Apr 07 Javascript
JavaScript中判断整字类型最简洁的实现方法
Nov 08 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
图片懒加载插件实例分享(含解析)
Jan 09 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 Javascript
基于JavaScript实现留言板功能
Mar 16 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 Javascript
Nuxt.js实战详解
Jan 18 #Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 #Javascript
ajax请求data遇到的问题分析
Jan 18 #Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 #Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 #Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 #Javascript
详解微信小程序审核不通过的解决方法
Jan 17 #Javascript
You might like
一个数据采集类
2007/02/14 PHP
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
python3 判断列表是一个空列表的方法
2018/05/04 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
Django中的cookie和session
2019/08/27 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
python求绝对值的三种方法小结
2019/12/04 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
匡威爱尔兰官网:Converse爱尔兰
2019/06/09 全球购物
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
爱护公共设施标语
2014/06/24 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
退学证明范本3篇
2014/10/29 职场文书
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
mysql自增长id用完了该怎么办
2022/02/12 MySQL