Nuxt.js的踩坑指南（常見問題彙總）

本文會不按期更新在nuxt.js中遇到的問題進行彙總。轉發請註明出處，尊重做者，謝謝！

---

注意：版本爲1.0+，適合低版本nuxt指南，不通用2.0+以上。

強烈推薦做者文檔版踩坑指南，點擊跳轉👉踩坑指南

在Nuxt的官方文檔中，中文文檔和英文文檔都存在着不小的差別。

1.路徑匹配問題：

In Nuxt.js, the path match is as follows:

@import url('~assets/css/style.css') //Error

This path matching is an error, and writing it like this is possible:

@import url('~/assets/css/style.css') //success

也就是說，在最新版本更新中，官方修復了路徑匹配問題：

而官方推薦使用~/assets匹配路徑，而不是使用在中文文檔中的~assets去匹配路徑。

而在中文文檔中，也並未見修復及更改此問題。

2.按需引入(UI框架等等)

例如使用UI框架：element-ui

我找了不少相關文章，並無詳細說明該如何引入。因此我要拿出來將他說明：

先來看下，若是不按需引入vendor.js的體積大小爲：

第一步，下載依賴：

# 先下載element-ui

npm install element-ui --save

# 若是使用按需引入，必須安裝babel-plugin-component(官網有須要下載說明，此插件根據官網規則不一樣，安裝插件不一樣)

npm install babel-plugin-component --save-dev

安裝好之後，按照nuxt.js中的規則，你須要在 plugins/ 目錄下建立相應的插件文件

在文件根目錄建立(或已經存在)plugins/目錄，建立名爲：element-ui.js的文件，內容以下：

import Vue from 'vue'

import { Button } from 'element-ui'    //引入Button按鈕

export default ()=>{
    Vue.use(Button)
}

第二步，引入插件

在nuxt.config.js中，添加配置爲：plugins

css:[
'element-ui/lib/theme-chalk/index.css'
],
plugins:[
'~/plugins/element-ui'
]

默認爲：開啓SSR,採用服務端渲染，也能夠手動配置關閉SSR，配置爲：

css:[
'element-ui/lib/theme-chalk/index.css'
],
plugins:[
    {
        src:'~/plugins/element-ui',
        ssr:false    //關閉ssr
    }
]

第三步，配置 babel選項

在nuxt.config.js中，配置在build選項中，規則爲官網規則：

build: {
      babel:{        //配置按需引入規則
          "plugins":[
              [
                  "component",
                  {
                      "libraryName":"element-ui",
                      "styleLibraryName":"theme-chalk"
                  }
              ]
          ]
      },
    /*
     ** Run ESLINT on save
     */
    extend (config, ctx) {
      if (ctx.isClient) {
        config.module.rules.push({
           enforce: 'pre',
           test: /\.(js|vue)$/,
           loader: 'eslint-loader',
           exclude: /(node_modules)/
        })
      }
    }
 }

此時，咱們在觀察打包之後文件體積大小，如圖：

此時，咱們成功完成了按需引入配置。

---

3.初始化腳手架的選擇：

官網提供的初始化腳手架爲：

# 基本的Nuxt.js項目模板

vue init nuxt/starter template

而其實，官方也提供了更多的模板以便於咱們使用，而我在中文文檔並未發現有說明：

• nuxt/starter 基本的Nuxt.js項目模板
• nuxt/express Nuxt.js + Express
• nuxt/koa Nuxt.js + Koa2
• nuxt/adonuxt Nuxt.js + AdonisJS
• nuxt/micro Nuxt.js + Micro
• nuxt/nuxtent 適用於內容較重網站的Nuxt.js + Nuxtent模塊

---

而咱們使用基礎的模板進行初始化項目，部署方式爲：

第一步，打包：

在執行npm run build的時候，nuxt會自動打包

第二步，選擇要部署的文件：

• .nuxt文件夾
• package.json 文件
• nuxt.config.js 文件(若是你部署一些proxy，則須要上傳這個文件，我的建議把它傳上去)

第三步，啓動你的 nuxt （重要）

使用pm2啓動你的nuxt.js

pm2 start npm --name "demo" -- run start

在這裏，我發現個問題，若是你使用window server 服務器，在使用pm2啓動時候，會出現錯誤，錯誤以下：

若是在Linux服務器下啓動，一樣的命令，一樣的執行，則不會出現錯誤：

這裏採用Linux CentOS 7

因此，我的建議，在採用初始化模板的時候，請選用express 或者 koa 進行初始化，理由以下：

1.採用基礎模板初始化，觀察package.json的啓動方式以下：

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  }

2.採用express/koa初始化模板，觀察package.json的啓動方式以下：

"scripts": {
    "dev": "backpack dev",
    "build": "nuxt build && backpack build",
    "start": "cross-env NODE_ENV=production node build/main.js",
    "precommit": "npm run lint",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
  }

在start中，對比下，我的以爲express/koa更靈活一些，它直接啓動了build/main.js文件，更能直觀的啓動方式，而關鍵在於，也能夠在windows server下運行起來。

注意事項：若是採用 express/ koa的模板初始化，服務器部署的時候，同時要上傳 build/目錄！！！

---

4.插件中獲取vue綁定

咱們須要在axios的插件中配置Loading加載效果，例如使用element-ui框架做爲示例：

1.建立插件

在文件根目錄建立(或已經存在)plugins/目錄，建立名爲：axios.js的文件，內容以下：

import Vue from 'vue'

var vm = new Vue({})    //獲取vue實例

export default function ({ $axios, redirect }) {

  $axios.onRequest(config => {
    if (process.browser) {    //判斷是否爲客戶端（必須）
        vm.$loading();
    }
  })

  $axios.onResponse(response=>{
      if (process.browser) {    //判斷是否爲客戶端（必須）
          let load = vm.$loading();
          load.close();
      }
  })

  $axios.onError(error => {
    const code = parseInt(error.response && error.response.status)
    if (code === 400) {
      redirect('/400')
    }
  })
}

如官方所說，並不須要像原生axios同樣，去return一個config出來。

2.配置 nuxt.config.js文件

在plugins選項添加：

plugins:['~/plugins/axios']

添加modules選項並添加以下示例：

modules:['@nuxtjs/axios']

配置防止屢次打包：

在build選項中(nuxt.config.js會默認配置)添加vendor配置項：

build:{
    vendor:['axios']
}

這樣就能夠調用loading加載方法,而且愉快的使用了。

（固然還有其餘的方法去調用vue實例，每一個人習慣不一樣，使用方式不一樣。）

---

5.Nuxt.js中配置代理解決跨域

咱們知道在vue-cli中配置代理很方便，只須要在config/目錄下的index.js中找到proxyTable添加便可，而在nuxt中一樣須要修改nuxt.config.js配置文件。

1.原始配置代理方式

使用@nuxtjs/axios和@nuxtjs/proxy進行代理解決跨域

1）.下載插件

# 下載插件

npm install @nuxtjs/axios @nuxtjs/proxy --save

2）.配置插件

在nuxt.config.js添加配置項：modules和proxy。

export default = {

    modules:[
        '@nuxtjs/axios',
        '@nuxtjs/proxy'
    ],
    proxy:[
        ['/json.html',{target:'http://www.xxxx.com'}]    //注意這也是一個數組
    ]
    
}

按照上面的方式已經完成了代理，能夠進行跨域請求了。

2.第二種方式的代理配置

1）.下載插件

此次只須要下載@nuxtjs/axios插件就能夠。

# 下載插件

npm install @nuxtjs/axios --save

2）.配置插件

module.exports = {

  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    proxy:true
  },
  proxy:{
    '/api': 'http://api.example.com',
    '/api2': 'http://api.another-website.com'
  }

}

特別注意：此時，axios選項爲對象(object)，proxy選項爲對象(object)。

---

@nuxtjs/axios的配置項

---

pathRewrite選項(重寫地址)

若是配置pathRewrite選項，能夠採用第二種寫法以下：

proxy: {

  '/api/': { target: 'http://api.example.com', pathRewrite: {'^/api/': ''} }

 }

/api/將被添加到API端點的全部請求中。可使用pathRewrite選項刪除。

由於在 ajax 的 url 中加了前綴 /api，而本來的接口是沒有這個前綴的。

因此須要經過 pathRewrite 來重寫地址，將前綴 /api 轉爲 /或者是''。

若是自己的接口地址就有 /api 這種通用前綴，就能夠把 pathRewrite 刪掉。

---

retry選項(自動攔截失敗請求)

能夠在axios選項中，配置retry配置項，自動攔截失敗請求，默認爲3次。

axios: {
  retry: { retries: 3 }
}

---

progress選項(發出請求時顯示加載欄)

與Nuxt.js進度條集成，在發出請求時顯示加載欄。（僅在瀏覽器上，當加載欄可用時。）

您還可使用progress配置爲每一個請求禁用進度條。

this.$axios.$get('URL', { progress: false })

---

baseURL選項（服務器端默認請求地址）

在服務器端使用和預先建立請求的基本URL。

---

browserBaseURL選項（客戶端默認請求地址）

在客戶端使用和預先建立請求的基本URL。

---

本文同步更新在我的博客中，?點擊跳轉
本文若是有錯誤之處，請在下方留言以便於及時更正，謝謝！