Nuxt.js 集成 koa2

Posted 2021-04-29 链乎社区

安装 koa 框架

// 安装 koa 框架
$ npm install koa -S

koa 启动文件

在项目目录下新建server目录，并新建index.js ，index.js 代码如下：

const Koa = require('koa')
const { Nuxt, Builder } = require('nuxt')

const app = new Koa()
const host = process.env.HOST || '127.0.0.1'
const port = process.env.PORT || 3000

// Import and Set Nuxt.js options
let config = require('../nuxt.config.js')
config.dev = !(app.env === 'production')

// Instantiate nuxt.js
const nuxt = new Nuxt(config)

// Build in development
if (config.dev) {
  const builder = new Builder(nuxt)
  builder.build().catch(e => {
    console.error(e) // eslint-disable-line no-console
    process.exit(1)
  })
}

app.use(ctx => {
  ctx.status = 200 // koa defaults to 404 when it sees that status is unset

  return new Promise((resolve, reject) => {
    ctx.res.on('close', resolve)
    ctx.res.on('finish', resolve)
    nuxt.render(ctx.req, ctx.res, promise => {
      // nuxt.render passes a rejected promise into callback on error.
      promise.then(resolve).catch(reject)
    })
  })
})

app.listen(port, host)
console.log('Server listening on ' + host + ':' + port) // eslint-disable-line no-console

修改配置文件 package.json

  "scripts": {
    "dev": "node server/index.js",
    "build": "nuxt build",
    "start": "NODE_ENV=production node server/index.js",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },

启动项目

$ npm run dev

访问 http://localhost:3000/ ，可以查看运行结果：

集成 koa-router 路由

安装koa-router

// koa2的路由对应版本是 7.x
npm install --save koa-router@7

新建 router 文件

在 server 里面新建 routers 文件夹，然后新建 index.js ，然后添加如下代码：

const router = require('koa-router')()

router.get('/q', function (ctx) {
  ctx.body = 'ok'
})
module.exports = router

引入 koa-router

修改 server/index.js ，引入 koa-router

const routers = require('./routers/index')

// 初始化路由中间件
app.use(routers.routes()).use(routers.allowedMethods())

测试路由

// 运行项目
npm run dev

访问 http://localhost:3000/q

注意事项

// 初始化路由中间件
app.use(routers.routes()).use(routers.allowedMethods())

一定要在调用 nuxt.render() 前面，这样访问路由的时候会先检验 routers 是否定义了路由，如果定义了则调用routers 里面的方法，如果没有定义会检测 nuxt 是否存在相应的路由，如果定义了则进入相应的页面，如果没有定义则 显示 404

全栈部落	区块链部落

扫描二维码

加入全栈部落

可点击下方“阅读原文”了解更多详情