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

柔光的暖阳◎ 2023-07-12 03:48 23阅读 0赞

`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][https_blog.csdn.net_weixin_44290787_article_details_89300823]

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

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

这个我就更懵了，最后没办法，只好把项目删除，重新来一遍, 最后在这篇博客的指导下解决问题了[https://blog.csdn.net/luoyu19940615/article/details/90694297][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 学习资料，期待各位客官来临  
![在这里插入图片描述][2020113011164256.jpg_pic_center]

[https_blog.csdn.net_weixin_44290787_article_details_89300823]: https://blog.csdn.net/weixin_44290787/article/details/89300823
[https_blog.csdn.net_luoyu19940615_article_details_90694297]: https://blog.csdn.net/luoyu19940615/article/details/90694297
[2020113011164256.jpg_pic_center]: https://img-blog.csdnimg.cn/2020113011164256.jpg#pic_center