Nuxt.js踩坑总结分享
构建问题
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
这时，在页面中打印出来的信息 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 = {}
}
最后
本文主要在项目中遇到的各种问题，文中有任何表述不清或不当的地方，欢迎大家批评指正。希望对大家的学习有所帮助，也希望大家多多支持我们。
您可能感兴趣的文章:
- Vue.js通用应用框架-Nuxt.js的上手教程
- Nuxt.js实战详解
相关推荐
-
Vue.js通用应用框架-Nuxt.js的上手教程
对于React,Vue构建的单页面应用老说,SEO是一个众所周知的问题.服务端渲染(SSR-server Side Render)是目前看来最好的解决办法.React应用有Next.js,对应Vue的解决方案就是Nuxt.js. 1.简介 官网:https://nuxtjs.org/ GitHub:https://github.com/nuxt/nuxt.js Nuxt.js 是什么? Nuxt.js 是一个基于 Vue.js 的通用应用框架. 通过对客户端/服务端基础架构的抽象组织,Nuxt.
-
Nuxt.js实战详解
一.为什么选择Nuxt.js 多数是基于webpack构建的项目,编译出来的html文件,资源文件都被打包到js中,以下图404页面代码为例.从代码中可以看出,这样的页面是不利于 搜索引擎优化(SEO, Search Engine Optimization) ,并且 内容到达时间(time-to-content) (或称之为首屏渲染时长)也有很大的优化空间.为了解决以上问题,引入了 Nuxt.js 框架. vue官网对于Nuxt.js也是很推荐的,除此之外,Nuxt.js的开发者积极活跃,版本迭
-
Nuxt.js踩坑总结分享
构建问题 1. 如何在 head 里面引入js文件? 背景: 在<head>标签中,以inline的形式引入flexible.js文件.本项目主要为移动端项目,引入flexible.js 实现移动端适配问题. Nuxt.js 通过 vue-meta 实现头部标签管理,通过查看文档发现,可以按照如下方式配置: // nuxt.config.js head: { script: [ { innerHTML: 'console.log("hello")', type: 'text
-
Vue.js 踩坑记之双向绑定
这篇体验一下VUE的双向绑定 <html> <head> <meta charset="utf-8"> </head> <body> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <div id="app"> <input type="text" v
-
Linux/Docker 中使用 System.Drawing.Common 踩坑记录分享
前言 在项目迁移到 .net core 上面后,我们可以使用 System.Drawing.Common 组件来操作 Image,Bitmap 类型,实现生成验证码.二维码,图片操作等功能.System.Drawing.Common 组件它是依赖于 GDI+ 的,然后在 Linux 上并没有 GDI+,面向谷歌编程之后发现,Mono 团队使用 C语言 实现了GDI+ 接口,提供对非Windows系统的 GDI+ 接口访问能力,这个应该就是libgdiplus.所以想让代码在 linux 上稳定运
-
Go语言日志内聚复用及gjson踩坑记录分享
目录 统一日志格式 打印日志 封装打印日志的方法 内聚和复用 gjson 今天分享一下最近遇到的坑: 以下代码示例使用GoFrame框架,下文简称为gf框架. 统一日志格式 我有个不好的习惯,不管是之前开发PHP,还是现在开发GO,都习惯在开发过程中使用dump()打印数据进行调试. 本地调试虽然爽了,但是上到测试环境,甚至开发环境查不到日志,无法方便的定位问题可就傻了. 所以,我们需要养成关键步骤打印日志的好习惯,而且要统一日志格式. 打印日志 scm.Log.Info("测试的日志都打印在这
-
vue.js踩坑之ref引用细节点讲解
目录 ref引用细节点讲解 要点简介:[ 见下文案例 ] 通过ref引用的形式,来操作DOM 步骤如下 重要代码如下 ref引用及插槽 ref引用 ref引用DOM元素 ref引用组件实例 实现标签的按需切换 插槽 匿名插槽 具名插槽 作用域插槽 ref引用细节点讲解 vue.js组件之H5页面,DOM标签或者组件中,通过ref="自定义name名称"引用的细节点 要点简介:[ 见下文案例 ] 使用is=" "解决H5出现的标签解析bug . 子组件中 使用data
-
详解Nuxt.js部署及踩过的坑
Nuxt.js 提供了两种发布部署应用的方式:服务端渲染应用部署 和 静态应用部署. 静态应用部署就不说了,主要说说服务端渲染应用部署. 官方推荐部署方式 关于服务端渲染应用部署,官方文档是这么写的: 部署 Nuxt.js 服务端渲染的应用不能直接使用 nuxt 命令,而应该先进行编译构建,然后再启动 Nuxt 服务,可通过以下两个命令来完成: nuxt build nuxt start 推荐的 package.json 配置如下: { "name": "my-app&quo
-
基于IOS端微信分享失效的踩坑及解决方法
最近的一个公众号是基于vue的spa应用,在接入微信分享和微信语音的时候出现了:在Android上一切正常,但是在ios端调用wx.config的时候总是失败,去翻了官方文档也并没有找到解决方案,最后在测试中发现是因为初始化的时候传入的URL的问题.具体过程如下: 微信config接口配置,官方文档如下: 所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支
-
nuxt使用vuex存储及获取用户信息踩坑的解决
目录 一.背景 二.具体使用方法以及遇到的问题 三.解决办法 一.背景 按公司要求做一个电商网站,考虑到seo,所以用的是nuxt进行开发. 登录之后记录用户信息(user)使用cookie+vuex模式. 二.具体使用方法以及遇到的问题 1.无法解码导致无法转化为对象且不支持中文: 使用nuxt的nuxtServerInit在在服务端的cookie里获取用户信息,但是user在存储时使用js-cookie,客户端已对数据进行编码且可能包含中文,在使用JSON.parse进行string转化为对
-
详解Nuxt.js中使用Element-UI填坑
Nuxt.js是Vue进行SSR的一个优选开源项目,可免去繁琐的Webpack.nodejs后台服务配置等操作,方便的搭建一个支持SSR的VUE项目.Element-UI则是一个机遇Vue2.0+开发的一套UI框架,实现了常用的组件,可帮助开发者快速搭建一个如CMS系统.后台管理系统等基于Vue的系统. 由于Element-UI目前在SSR支持方面还是不够完善,且Nuxt.js在文档方面也有欠缺,所以在Nuxt.js中使用Element-UI也是一段坑路,需要去将查看Nuxt源码与Element