[Nuxt.js 系列] 踩坑分享篇

03-01

來自摩拜前端團隊 yingye ，如有不對地方請指正
本文主要分享構建和開發中遇到的坑：比如預編譯的支持、瀏覽器環境的 window 對象支持以及 ENV 的配置等等
歡迎關注本系列，留言分享 ssr 的一些經驗

構建問題

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

背景: 在 <head> 標籤中，以 inline 的形式引入 flexible.js 文件
移動端項目可以引入 flexible.js 來實現移動端適配

Nuxt.js 通過 vue-meta 實現頭部標籤管理

通過查看文檔發現，可以按照如下方式配置：

// nuxt.config.jshead: { 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

但是解決過程並不是很順利的，在閱讀中文文檔時，忽略版本號，按照上面的提示進行操作，發現不能成功，最後發現了該解決方案。

中文文檔的版本號過低，如需查看文檔，一定要看最新版本的英文文檔！

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 目錄添加 alias

剛剛說到，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 vueimport toast from ../utils/toastimport ../assets/css/toast.cssVue.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，並且是寫死的不可配置的...... （重寫 backpack，恩~）

注意：lerna 來管理還是一個值得關注的工具

無奈下，只能在 process.env 下，添加 __ENV 屬性，代表 NODE_ENV

這時，在頁面中列印出來的信息 process.env.__ENV undefined，但是可以列印出 process.env.NODE_ENV。

可以通過配置 nuxt.config.js 中的，env 屬性，解決該問題：

env: { __ENV: process.env.__ENV}

開發問題

1Window 或 Document 對象未定義?

背景: 在引入第三方插件，或者直接在代碼中寫 window 時
控制台會給出警告，window 未定義。

發生在這個問題的原因時，node 服務端並沒有 window 或 document 對象。

解決方法：通過 process.browser 來區分環境

if (process.browser) { // 引入第三方插件 require(***) // 或者修改window對象下某一屬性 window.mobike = {}}

還不夠，明天還有哦！！！

歡迎關注我們的微信公眾號：前端新視野