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。

---

本文同步更新在我的博客中，?点击跳转
本文若是有错误之处，请在下方留言以便于及时更正，谢谢！