Vue服务器端渲染之Nuxt实战

作者: 张阳君 分类: 前端技术

提到服务器端渲染,Vue官网推荐了一个成熟的第三方框架Nuxt.js。我用了一段时间,就被它完美的设计深深吸引住。Nuxt.js的中文官网是:https://zh.nuxtjs.org/,如果你在用Vue但还没接触服务器端渲染,我建议你一定要去尝试一下。这篇文章主要和大家聊聊在使用Nuxt过程中遇到的一些问题以及解决方案。

Nuxt目录结构变化

根据教程,安装好starter模板就可以开始写代码了。官网对项目的目录结构都有基本的说明,这节主要说一下我在实际开发中的一些变化:

一般的中大型项目都会有多种环境变量,这里我预定了三种,在根目录下添加了envrionments文件夹,其中包含envrionments.dev.jsenvrionments.prod.jsenvrionments.test.js三个环境变量文件和一个index.js入口文件。同时还改动了nuxt.config.jspackage.json的部分代码。

入口文件的代码:

const { environment } = require(`./environments.${process.env.TYPE}`);
export default environment;

nuxt.config.js的代码:

module.exports = {
  env: {
    TYPE: process.env.TYPE
  },
  ...
}

package.json的代码:

{
  "scripts": {
      "start": "cross-env TYPE=dev nuxt",
      "test": "cross-env TYPE=test nuxt build",
      "prod": "cross-env TYPE=prod nuxt build",
      "launch": "nuxt start",
      ...
  },
  ...
}

注意:cross-env需要单独安装,主要用来解决windows下环境变量传值问题。另外test和prod都需要进行build,然后再运行launch命令才会真正启动项目。

改动之后,调用起来就很方便了:

import environment from '~/environments';
console.log(environment.apiUrl);

Nuxt部署问题

Nuxt部署后外网无法访问

很多同学在开发Nuxt的时候很顺利,但是部署到外网后,发现Nuxt项目无法访问。本地明明好好的,为什么一到线上,就白屏了呢?原因在于我们没有在配置中将本机的ip暴露给外网,解决方案如下:

package.json中添加:

{
  ...,
  "config": {
    "nuxt": {
      "host": "0.0.0.0",
      "port": "3000"
    }
  },
  ...
}

上述端口号可以根据项目需求修改。

Nuxt部署后进程经常断掉

node进程经常断掉其实是通病,就算在本地,Nuxt项目运行久了也会自动退出。解决方案是使用进程守护工具,我比较推荐pm2。另外,Nuxt项目的启动命令比较长,我们还可以使用node-cmd将命令封装到一个js文件中,然后调用pm2 start xxx.js

Nuxt开发问题

Nuxt插件开发问题

开发过Nuxt插件的同学都知道,直接使用export default就可以获得Nuxt提供的一些参数,如routereq。插件的注入过程是框架自动执行的,这就导致我们无法将该插件中的关键变量导出到全局,要知道不是每个场景都能通过this来调用插件的。这个问题可以用js闭包来解决。代码如下:

import Vue from 'vue';
let http = null;
let httpPlugin = {
    install: null
};
export default ({ redirect, route, store, res, req, params, error }) => {
  let httpCopy = ...;
  httpPlugin.install = (Vue, options) => {
    Vue.prototype.$http = httpCopy;
  };
  Vue.use(httpPlugin);
  http = httpCopy;
}
export { http };

这样,部分场景可以直接import该文件从而获得http的功能。

记得使用no-ssr标签

官网并没有提到<no-ssr></no-ssr>标签,虽然很多必须在客户端渲染的库可以通过设置ssr为false来引入,但是有些情况下控制台会有相关错误。使用<no-ssr></no-ssr>标签,可以解决这个问题。

本地存储请优先考虑cookies

很多人会用localstorage来处理本地存储,但是,千万不要在Nuxt的项目中这么做!由于Nuxt会先在服务器环境执行代码,所以这个阶段是无法获取window对象的,localstorage自然读取不到,这会导致服务端渲染的代码运行出错。所以请优先考虑cookies,Nuxt在storeactions里提供了nuxtServerInit方法,在方法体中可以通过req.headers.cookie得到本地存储。

注意:如果一些信息可以在客户端渲染阶段读取的话,那么还是优先考虑用localstorage

小结

Nuxt非常强大,但是想要用起来得心应手的话,还需要多多实践。本文涉及的内容只是冰山一角,希望能够抛砖引玉,有任何问题欢迎在下方给我留言!

(全文完)

0 条评论
回复
支持 Markdown 语法
暂无评论,来抢个沙发吧!