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 相关文章推荐
js获取单选按钮的数据
Nov 27 Javascript
javascript编程起步(第四课)
Jan 10 Javascript
基于jQuery的星级评分插件
Aug 12 Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 Javascript
如何将php数组或者对象传递给javascript
Mar 20 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
详解json串反转义(消除反斜杠)
Aug 12 Javascript
vuex的使用步骤
Jan 06 Vue.js
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中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
PHP 实现缩略图
2021/03/09 PHP
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
Python安装第三方库的3种方法
2015/06/21 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
python经典趣味24点游戏程序设计
2019/07/26 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
python中rc1什么意思
2020/06/19 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
新大陆软件面试题
2016/11/24 面试题
结婚典礼证婚词
2014/01/08 职场文书
安全承诺书格式范本
2015/04/28 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android