Nuxt.js踩坑分享

yingye發表於2018-01-11
UXJS

構建問題

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(&quot;hello&quot;)</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

clipboard.png

這時，在頁面中列印出來的資訊 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 = {}
}
複製程式碼

最後

本文主要在專案中遇到的各種問題，文中有任何表述不清或不當的地方，歡迎大家批評指正。給大家推薦我們的公眾號 前端新視野 ，一個很認真的日刊公眾號，歡迎掃描下方二維碼關注！

clipboard.png

相關文章