1、nuxt引入問題：Can't resolve 'stylus-loader'
原因在於沒有安裝stylus，安裝即可：npm install stylus stylus-loader --save-dev
2、nuxt生命周期：
眾所周知，Vue的生命周期全都跑在客戶端(瀏覽器)，而Nuxt的生命周期有些在服務端(Node)，客戶端，甚至兩邊都在
生命周期流程圖，紅框內的是Nuxt的生命周期(運行在服務端)，黃框內同時運行在服務端&&客戶端上，綠框內則運行在客戶端
（1）紅框、黃框內的周期都不存在Window對象
export default { asyncData() { console.log(window) // 服務端報錯
}, fetch() { console.log(window) // 服務端報錯
}, created () { console.log(window) // undefined
}, mounted () { console.log(window) // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
} }
3、配置插件
所有插件都寫在/plugins目錄下，這里以vue-lazyload為例：plugins/lazy-load.js
import Vue from 'vue' import VueLazyLoad from 'vue-lazyload' Vue.use(VueLazyLoad, { loading: require('~/assets/images/loading.jpg'), error: require('~/assets/images/error.jpg') })
然后在nuxt.config.js中添加plugins 配置，這樣插件就會在 Nuxt.js 應用初始化之前被加載導入
module.expors = { plugins = [ { src: "~/plugins/lazy-load", ssr: false } ] }
4、使用Axios，並配置全局攔截器，處理跨域
推薦使用@nuxtjs/axios、@nuxtjs/proxy，不需要在plugins配置：npm install
/* ** Nuxt.js modules */ modules: [ '@nuxtjs/axios', // 不需要加入proxy '@nuxtjs/router' ], axios: { proxy: true }, proxy: { '/api': { target: 'http://119.3.166.247:8080/', changeOrigin: true, pathRewrite: { '^/api': '/' } } },
組件中使用axios：需要注意的是組件的fetch和asyncData里只能使用nuxtjs模板里的axios哦，如果使用我們自己引入的axios，是無法使用的
<script> export default { fetch ({ app }) { console.log(app.$axios) }, asyncData ({ app }) { console.log(app.$axios) }, created () { console.log(this.$axios) } } </script>
到此為止，我們並不需要在plugins配置axios，但是如果要設置全局攔截器，那么就要新建一個/plugins/axios.js
export default function (app) { let axios = app.$axios; // 基本配置
axios.defaults.timeout = 10000 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
// 請求回調
axios.onRequest(config => {}) // 返回回調
axios.onResponse(res => {}) // 錯誤回調
axios.onError(error => {}) }
然后在plugins配置它，這個是加入到插件plugins里面喲
module.exports = { plugins = [ { src: "~/plugins/axios", ssr: false }, ] }
5、如何在 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("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'] }