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 对象定义方法 简单易学
Mar 22 Javascript
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
JS实现可改变列宽的table实例
Jul 02 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 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 分页函数multi() discuz
2009/06/21 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
js倒计时显示实例
2016/12/11 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
简单实现jQuery弹幕效果
2017/05/06 jQuery
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
小程序实现短信登录倒计时
2019/07/12 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
介绍Python的@property装饰器的用法
2015/04/28 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
python安装Scrapy图文教程
2017/08/14 Python
Python 移动光标位置的方法
2019/01/20 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
linux面试题参考答案(4)
2013/01/28 面试题
师范生教师实习自我鉴定
2013/09/27 职场文书
数字化校园建设方案
2014/05/03 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
2014年民警工作总结
2014/11/25 职场文书
红白喜事主持词
2015/07/06 职场文书
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python