Nuxt.js常見的一些問題（詳細教學）

本篇主要介紹了Nuxt.js踩坑總結分享，現在分享給大家，也給大家做個參考。

建構問題

1. 如何在head 裡面引入js檔案?

背景: 在93f0f5c25f18dab9d176bd4f6de5d30e標籤中，以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. 如何使用預處理器

背景：在元件中的d477f9ce7bf77f53fbcf36bec1b69b7a， 3f1c4e4b6b16bbbd69b2ee476dc4f83a 或c9ccee2e6ea535a969eb3f532ad9fe89 上使用各種預處理器，加上處理器後，控制台報錯。

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

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

使用AnglarJs實作上拉載入

#使用vue.js如何實作被選取的改變方法

在vue中如何阻止click事件冒泡

Vue.js 點選按鈕顯示/隱藏內容

vue中如何改變目前項目的顯示隱藏

Ionic實作驗證碼倒數計時

在vue中如何實作父元件點擊觸發子元件事件

以上是Nuxt.js常見的一些問題（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！