【Nuxt.js 系列】踩坑分享篇

本文摘要

来自摩拜前端团队 yingye，如有不对地方请指正

本文主要分享构建和开发中遇到的坑：比如预编译的支持、浏览器环境的 window 对象支持以及 ENV 的配置等等

欢迎关注本系列，留言分享 ssr 的一些经验

构建问题

1

如何在 head 里面引入 js 文件?

背景: 在 标签中，以 inline 的形式引入 文件

移动端项目可以引入 来实现移动端适配

Nuxt.js 通过 实现头部标签管理

通过查看文档发现，可以按照如下方式配置：

结果，生成 html 如下:

发现把引号做了转义处理，加入 后，就不会再对这些字符做转义了。

注释：该字段使用需慎重！

接下来，要把 的内容替换成 ，配置升级之后如下：

踩坑成功，下一个坑...

2

如何预处理器?

背景：在组件中的 或 上使用各种预处理器

加上处理器后，控制台报错

这个问题解决方法非常简单，只需要安装这些依赖就好：

但是解决过程并不是很顺利的，在阅读中文文档时，忽略版本号，按照上面的提示进行操作，发现不能成功，最后发现了该解决方案。

中文文档的版本号过低，如需查看文档，一定要看最新版本的英文文档！

3

如何使用 px2rem?

背景：在 css 中，写入 px，通过 将 px 转换成 rem

在以前的项目中，是通过实现的，但是在 Nuxt.js 项目下，添加 css loader 还是很费力的，因为涉及到。

想到了一个其他方案：

可以使用 处理。可以在 文件中添加配置，也可以在文件中添加。

4

如何拓展 webpack 配置?

背景：给 utils 目录添加 alias

刚刚说到，Nuxt.js 内置了 配置

如果要拓展配置，在 文件中添加。

同时也可以在该文件中，将配置信息打印出来。

5

如何添加 vue plugin?

背景：封装了一个 toast vue plugin

由于 vue 实例化的过程没有暴露出来，在哪个时机注入进去呢？

可以在 中添加 plugins 配置，这样插件就会在 Nuxt.js 应用初始化之前被加载导入。

~plugins/toast.js 文件：

6

如何修改环境变量 NODE_ENV?

背景：在项目中，设置 3 个 的值，来对应不同的版本。

development，本地开发；release，预发布版本；production，线上版本。

其中，预发布版本比 production 版本，多出 vconsole。

打印 依旧是：。

在backpack的源码中，找到了答案：

在执行 命令时，会把 修改为 ，并且是写死的不可配置的...... （重写 backpack，恩~）

注意：lerna 来管理还是一个值得关注的工具

无奈下，只能在 下，添加 属性，代表

这时，在页面中打印出来的信息 ，但是可以打印出 。

可以通过配置 中的，属性，解决该问题：

开发问题

1

Window 或 Document 对象未定义?

背景: 在引入第三方插件，或者直接在代码中写 时

控制台会给出警告，未定义。

发生在这个问题的原因时，node 服务端并没有 或 对象。

解决方法：通过来区分环境

还不够，明天还有哦！！！

昨日的日刊是不是漏看了，给你一个传送门：

好消息：

1、可以在公众号【菜单 - 日刊】上看到所有的日刊文章模板啦

2、日刊君也开通了知乎专栏 [前端新视野]：

https://zhuanlan.zhihu.com/c_141430263

一个一天就破 *k 关注的日刊号

一个立志把质量当生命的日刊号

一个大佬们都在关注的日刊号

...

分享给喜欢学习的小伙伴吧