介绍

1.nuxt是什么？
Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器。

2.Egg.js是什么？
Egg.js是基于Koa的上层框架，为企业级框架和应用而生。

快速初始化

  1. $ npm i egg-init -g
  2. $ egg-init egg-example --type=simple
  3. $ cd egg-example
  4. $ npm i
  5. $ npm install nuxt

目录结构

  1. egg-example
  2. ├── package.json
  3. ├── app.js
  4. ├── agent.js
  5. |—— client
  6. ├── app
  7. |   ├── router.js
  8. │   ├── controller
  9. │   |   └── home.js
  10. │   ├── service
  11. │   |   └── user.js
  12. │   ├── middleware
  13. │   |   └── nuxt.js
  14. │   ├── schedule
  15. │   |   └── task.js
  16. │   ├── public
  17. │   |   └── reset.css
  18. │   ├── view
  19. │   |   └── home.tpl
  20. │   └── extend
  21. │       ├── helper.js
  22. │       ├── request.js
  23. │       ├── response.js
  24. │       ├── context.js
  25. │       ├── application.js
  26. │       └── agent.js
  27. ├── config
  28. |   ├── plugin.js
  29. |   ├── config.default.js
  30. │   ├── config.prod.js
  31. |   ├── config.test.js
  32. |   ├── config.local.js
  33. |   └── config.unittest.js
  34. └── test
  35.     ├── middleware
  36.     |   └── nuxt.test.js
  37.     └── controller
  38.         └── home.test.js

新建NUXT中间件

  1. const { Nuxt, Builder } = require("nuxt");
  2. let config = require("../../nuxt.config");
  3. module.exports = (options, app) => {
  4.   const nuxtRender = new Nuxt(config);
  5.   let isProduction = process.env.NODE_ENV === "production";
  6.   if (isProduction) {
  7.     new Builder(nuxtRender).build();
  8.   }
  9.   return async function(ctx, next) {
  10.     let flag = false;
  11.     let routerArr = [];
  12.     if (!flag) {
  13.       routerArr = app.router.stack.map(el => el.path);
  14.       flag = true;
  15.     }
  16.     if (routerArr.some(el => el === ctx.path)) {
  17.       return await next();
  18.     }
  19.     ctx.status = 200;
  20.     ctx.req.session = ctx.session;
  21.     const { res, req } = ctx;
  22.     return new Promise((resolve, reject) => {
  23.       ctx.res.on("close", resolve);
  24.       ctx.res.on("finish", resolve);
  25.       nuxtRender.render(req, res, promise => {
  26.         promise.then(resolve).catch(reject);
  27.       });
  28.     });
  29.   };
  30. };

新建NUXT目录以及配置文件

1.新建client目录，目录规范遵循nuxt配置
2.在项目根目录新建nuxt.config.js

  1. module.exports = {
  2.   srcDir: "client/",
  3. };

其余配置参考nuxt官方配置

问题

1.如果后端采用session鉴权，由于session依赖cookie，需要在asyncData的时候讲cookie传后端

  1. asyncData({ params, store, req }) {
  2.     if (process.server) {
  3.       Object.keys(req.headers).map(key => {
  4.         axios.defaults.headers.common[key] = req.headers[key];
  5.       });
  6.     }
  7.     return axios.get("http://127.0.0.1:7001/api/news/list").then(res => {
  8.       return { list: res.data };
  9.     });
  10.   }

2.使用官方axios直接进行代理
axios