Nuxt.js踩坑分享

时间 2019-11-08

原文原文链接

构建问题

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

背景: 在 <head>标签中，以inline的形式引入 flexible.js文件。本项目主要为移动端项目，引入 flexible.js 实现移动端适配问题。

Nuxt.js 经过 vue-meta 实现头部标签管理，经过查看文档发现，能够按照以下方式配置：javascript

// nuxt.config.js
head: {
  script: [
    { innerHTML: 'console.log("hello")', type: 'text/javascript', charset: 'utf-8'}
  ]
}

结果，生成 html:css

<script data-n-head="true" type="text/javascript" charset="utf-8">console.log(&quot;hello&quot;)</script>

咱们发现 vue-meta 把引号作了转义处理，加入 __dangerouslyDisableSanitizers: ['script'] 后，就不会再对这些字符作转义了，该字段使用需慎重！html

接下来，要把 console.log("hello") 的内容替换成 flexible.js，配置升级以后：前端

head: {
  script: [{ innerHTML: require('./assets/js/flexible'), type: 'text/javascript', charset: 'utf-8'}],
  __dangerouslyDisableSanitizers: ['script']
}

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

2. 如何使用预处理器

背景：在组件中的 <template>， <script> 或 <style> 上使用各类预处理器，加上处理器后，控制台报错。

<style lang="sass">
.red
  color: red
</style>

这个问题解决方法很是简单，只须要安装这些依赖就好。java

npm install --save-dev node-sass sass-loader

可是解决过程并非很顺利的，在阅读中文文档时，忽略版本号，按照上面的提示进行操做，发现不能成功，后来各类debug，最后发现了该解决方案。后知后觉的发现了中文文档的版本号太低，若是须要查看文档，必定要看最新版本的英文文档！node

3. 如何使用px2rem

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

在之前的项目中，是经过 px2rem loader实现的，可是在Nuxt.js项目下，添加 css loader 仍是很费力的，由于涉及到vue-loader。webpack

想到了一个其余方案，可使用 postcss 处理。能够在 nuxt.config.js 文件中添加配置，也能够在postcss.conf.js文件中添加。web

build: {
  postcss: [
    require('postcss-px2rem')({
      remUnit: 75 // 转换基本单位
    })
  ]
},

4. 如何拓展 webpack 配置

背景：给 utils 目录添加别名

刚刚说到，Nuxt.js内置了 webpack 配置，若是想要拓展配置，能够在 nuxt.config.js 文件中添加。同时也能够在该文件中，将配置信息打印出来。npm

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 = {}
}

最后

本文主要在项目中遇到的各类问题，文中有任何表述不清或不当的地方，欢迎你们批评指正。给你们推荐咱们的公众号前端新视野，一个很认真的日刊公众号，欢迎扫描下方二维码关注！

1. Nuxt.js踩坑分享
2. nuxt.js踩坑记录
3. nuxt.js实战踩坑记录
4. ios友盟分享踩坑
5. Nuxt.js项目搭建配置踩坑
6. [分享][Vue踩坑记]scoped CSS
7. oAuth2 升级Spring Cloud Finchley.RELEASE踩坑分享
8. Nginx location 配置踩坑过程分享
9. nuxt 踩坑分享之 pages 命名
10. Arrays.asList()踩坑踩坑
更多相关文章...
• SVN分支 - SVN 教程
• IP地址分配（静态分配+动态分配+零配置） - TCP/IP教程
• Git五分钟教程
• 算法总结-二分查找法