前端SSR

阅读数: 2021-03-29

前言

由于打算使用vue编写项目，但是需要考虑SEO的需求，于是采用SSR服务端渲染的方式提高首页加载速度和SEO优化。

vue官网推荐的SSR方案有两种，Nuxt.js 和 Quasar Framework SSR + PWA，详见：https://cn.vuejs.org/v2/guide/ssr.html。但是实际上较多受关注的还有Webpack的插件prerender-spa-plugin，也可以看下面博客学习使用https://www.cnblogs.com/you-uncle/p/13037300.html。

这里由于Nuxt.js是官方推荐，而且有专人维护，更为成熟，因此采用Nuxt作为SSR方案。

创建项目

使用脚手架创建

环境要求：npm > 5.2.0

安装create-nuxt-app脚手架

1	npm i -g create-nuxt-app@2.15.0

这里不指定版本安装的话是 v3.4.0, 安装选项和官网的文档不一致，因此手动指定下版本。

v3.4.0的安装选项如下图（了解）：

创建项目

1	npx create-nuxt-app ssr_demo[项目名]

1607927184910

这里安装完成有报错，如下图：

实际上，这个不是报错，而是当 eslint 检查到错误或者警告时，会返回非0的代码，此时就会出现npm ERR!。这里是由于eslint修正代码命令修正失败，因为 --fix 只能修改那些 fixable 的规则。

https://segmentfault.com/q/1010000014288785/a-1020000014296366

打开项目本地调试

1	npm run dev

1607929089480

中间提示是否愿意发送匿名数据给nuxtJS官方，我选择了no

第一次运行会报错：

解决方法：项目中编辑 .eslintrc.js, 加上'vue/comment-directive': 'off'即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    '@nuxtjs',
    'plugin:nuxt/recommended'
  ],
  // add your custom rules here
  rules: {
    'nuxt/no-cjs-in-config': 'off',
    'vue/comment-directive': 'off',  // 这个
  }
}
详情见：https://eslint.vuejs.org/rules/comment-directive.html

从头开始新建项目

见：https://www.nuxtjs.cn/guide/installation

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/50aae781.html
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！