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 相关文章推荐
javascript支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
Nov 30 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
JQuery学习笔录 简单的JQuery
Apr 09 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
微信小程序 教程之WXSS
Oct 18 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
Angular2 路由问题修复详解
Mar 01 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
基于Vue SEO的四种方案(小结)
Jul 01 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 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
php设计模式 Singleton(单例模式)
2011/06/26 PHP
php获取淘宝分类id示例
2014/01/16 PHP
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
Javascript 错误处理的几种方法
2009/06/13 Javascript
jquery.validate使用攻略 第一部
2010/07/01 Javascript
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
Python标准库os.path包、glob包使用实例
2014/11/25 Python
Python实现二分查找算法实例
2015/05/26 Python
python集合用法实例分析
2015/05/30 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
python移位运算的实现
2019/07/15 Python
Django REST 异常处理详解
2020/07/15 Python
python使用建议与技巧分享(一)
2020/08/17 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
全球性的女装店:storets
2019/06/12 全球购物
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
门卫班长岗位职责
2013/12/15 职场文书
Python之matplotlib绘制折线图
2022/04/13 Python