原文：https://segmentfault.com/a/1190000014526984
本文會不定期更新在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/expressNuxt.js + Expressnuxt/koaNuxt.js + Koa2nuxt/adonuxtNuxt.js + AdonisJSnuxt/microNuxt.js + Micronuxt/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。
本文同步更新在個人博客中，?點擊跳轉
本文如果有錯誤之處，請在下方留言以便於及時更正，謝謝！