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

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

建構問題

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

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

背景：在元件中的