构建 nuxt with koa，及报错解决方案

Nuxt.js 解决了 Vue 搜索引擎爬虫抓不到这个问题，且可以提高首屏加载的速度。

Nuxt.js 从服务器请求数据，之后渲染界面。服务端渲染对 SEO 友好，在经过网络传输的时候，爬虫客户端爬到页面后会分析页面，这样页面的关键数据就会被爬虫收录。

---

构建命令如下：

1. vue init nuxt-community/koa-template nuxt-learn
2. yarn install or npm install
3. npm run dev

出现报错

ERROR  Failed to compile with 1 errors20:10:54

 error  in ./server/index.js

Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions. In D:\vue\VueBase\nuxt-learn\node_modules\backpack-core\babel.js
    at createDescriptor (D:\vue\VueBase\nuxt-learn\node_modules\@babel\core\lib\config\config-descriptors.js:178:11)
    at D:\vue\VueBase\nuxt-learn\node_modules\@babel\core\lib\config\config-descriptors.js:109:50
    at Array.map (<anonymous>)
    at createDescriptors (D:\vue\VueBase\nuxt-learn\node_modules\@babel\core\lib\config\config-descriptors.js:109:29)
    at createPresetDescriptors (D:\vue\VueBase\nuxt-learn\node_modules\@babel\core\lib\config\config-descriptors.js:101:10)
    at D:\vue\VueBase\nuxt-learn\node_modules\@babel\core\lib\config\config-descriptors.js:58:104
    at cachedFunction (D:\vue\VueBase\nuxt-learn\node_modules\@babel\core\lib\config\caching.js:62:27)
    at cachedFunction.next (<anonymous>)
    at evaluateSync (D:\vue\VueBase\nuxt-learn\node_modules\gensync\index.js:244:28)
    at sync (D:\vue\VueBase\nuxt-learn\node_modules\gensync\index.js:84:14)

internal/modules/cjs/loader.js:796
    throw err;
    ^

Error: Cannot find module 'D:\vue\VueBase\nuxt-learn\build\main.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
    at Function.Module._load (internal/modules/cjs/loader.js:686:27)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
    at internal/main/run_main_module.js:17:11 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

作为小白一枚，也不知道怎么解决，就百度找方案，第一次解决是参照这篇博客解决的 https://blog.csdn.net/weixin_44290787/article/details/89300823

按照这篇博客是可以解决问题的，但是后来按照 koa-router 的时候，终端报错了

'backpack' ▒▒▒▒▒ڲ▒▒▒▒ⲿ▒▒▒Ҳ

这个我就更懵了，最后没办法，只好把项目删除，重新来一遍, 最后在这篇博客的指导下解决问题了https://blog.csdn.net/luoyu19940615/article/details/90694297

最后列出安装步骤

vue init nuxt-community/koa-template nuxt-learn
npm install
npm run dev
npm install backpack-core@0.7.0 --save-dev

在 nuxt.config.js 里找到 eslint-loader 将 ctx.isClient 改成 ctx.Client 就可以运行了。

extend (config, ctx) {
      if (ctx.Client) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }

关注公众号：大明贵妇，获取 nuxt 学习资料，期待各位客官来临