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 相关文章推荐
Opacity.js
Jan 22 Javascript
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
jQuery 开天辟地入门篇一
Dec 09 Javascript
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
js中日期的加减法
May 06 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
jquery实现垂直和水平菜单导航栏
Aug 27 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
Vue实现简单计算器案例
Feb 25 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通用分页类page.php[仿google分页]
2008/08/31 PHP
php 图像函数大举例(非原创)
2009/06/20 PHP
PHP 第二节 数据类型之转换
2012/04/28 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
jquery图片放大功能简单实现
2013/08/01 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
python选择排序算法实例总结
2015/07/01 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
Python 获取项目根路径的代码
2019/09/27 Python
报到证丢失证明
2014/01/11 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
集中采购方案
2014/06/10 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
单身证明范本
2015/06/15 职场文书
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android