浅谈Nuxt.Js

背景

现在我们的项目大多数都是SPA（单页面应用）。单页面应用是前后端分离，架构清晰，前端负责交互和展示，后端负责数据维护，前后端可以单独开发，也可以单独测试和升级部署。但是SPA不利于SEO优化。

什么是SEO优化

SEO（全称：Search Engine Optimization）。是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。目的是为了提高网站的权重，以吸引更多的用户通过搜索引擎访问网站，获得品牌收益。

我们可以通过SEO优化来提升网站在搜索引擎伤的排名，并且更容易通过关键词查找到我们的网站。那么如何进行SEO优化呢？

什么是SSR

SSR（全称Server Side Render）服务端渲染。通常情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

换句话说，在浏览器中渲染一个页面或模块，需要浏览器生成DOM和操作DOM，也可以由服务器端渲染，然后直接发送到浏览器。服务端渲染就是第二种，即网页是通过服务端渲染生成后输出给客户端。当前端发生请求时，重新向服务端请求 html 资源。

为什么选择Nuxt.js

首先Nuxt.js 是一个基于 Vue.js 的通用应用框架，一个用于Vue.js 开发SSR应用的一站式解决方案。

同时Nuxt.js是使用 Webpack 和 Node.js 进行封装的基于Vue的SSR框架，不需要自己搭建一套 SSR 程序，而是通过其约定好的文件结构和API就可以实现一个首屏渲染的 Web 应用。

总结一句话，Nuxt.js已经做了封装，更利于提高开发效率。

如何搭建一个Nuxt项目

npx create-nuxt-app <项目名> /  yarn create nuxt-app <项目名>

cd xxx

npm run dev

Nuxt项目目录

init-nuxt
├─ .editorconfig
├─ .git
│  ├─ HEAD
│  ├─ config
│  ├─ description
│  ├─ hooks
│  │  ├─ applypatch-msg.sample
│  │  ├─ commit-msg.sample
│  │  ├─ fsmonitor-watchman.sample
│  │  ├─ post-update.sample
│  │  ├─ pre-applypatch.sample
│  │  ├─ pre-commit.sample
│  │  ├─ pre-push.sample
│  │  ├─ pre-rebase.sample
│  │  ├─ pre-receive.sample
│  │  ├─ prepare-commit-msg.sample
│  │  └─ update.sample
│  ├─ info
│  │  └─ exclude
│  ├─ objects
│  │  ├─ info
│  │  └─ pack
│  └─ refs
│     ├─ heads
│     └─ tags
├─ .gitignore
├─ README.md
├─ assets
│  └─ README.md
├─ components
│  ├─ Logo.vue
│  └─ README.md
├─ layouts
│  ├─ README.md
│  └─ default.vue
├─ middleware
│  └─ README.md
├─ nuxt.config.js
├─ package.json
├─ pages
│  ├─ README.md
│  └─ index.vue
├─ plugins
│  └─ README.md
├─ static
│  ├─ README.md
│  └─ favicon.ico
├─ store
│  └─ README.md
└─ yarn.lock

nuxt和vue的区别

1.路由

a.一级路由，pages文件夹的目录结构自动生成路由。如localhost:3000/aboutus/则是去pages/aboutus.vue组件。

b.当二级路由时,也需要有对应的目录文件。如如localhost:3000/project/detail则是去pages/project/detail.vue组件。同时，建议在vue文件中书写对应的name

比如，在pages/users/index.vue页面中

export default {
  name: 'users'
}

其他页面，比如pages/users/ditch.vue页面中
export default {
  name: 'users-ditch'
}

2.nuxt内置webpack,允许根据服务端需求，在 nuxt.config.js 中的build属性自定义构建webpack的配置

3.nuxt页面入口为 layouts/default.vue vue页面入口为 src/App.vue

4.html的head和mate标签内容需要在nuxt.config.js配置

head: {
    title: 'init-nuxt',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

5.单独设置页面组件特有的Meta标签

head: {
    title: '【关于我们】',
    meta: [
      ...commonMeta
    ],
  },

6.根据请求内容动态的设置Meta标签

export default {
    async asyncData({app, params}) {
        let data = await app.$axios.get(`/appinfo/${params.id}`);
        return {
            appname: data.appinfo.appname
        }
    },
	head() {
        return {
            meta: [{
                name: 'keywords',
                content: `${this.appname}`
            }]
        }
    }
}

7.修改本地开发端口

	"dependencies": {
		"core-js": "^3.6.5",
		"element-ui": "^2.13.2",
		"nuxt": "^2.14.6",
		"axios": "^0.19.0",
		"jquery": "^3.3.1"
	},
	"config": {
		"nuxt": {
			"host": "0.0.0.0",
			"port": "3000"
		}
	},

nuxt中的asyncData与data的区别

asyncData 是在 vue 页面创建期间调用，用于给页面变量进行赋值的数据.
在SSR 渲染过程中这部分数据会被加载到页面上，SEO 可以检索到这部分数据。
也可以通过mounted中获取的数据需要先保存到 data 中再进行渲染，但是如果数据放在 mounted 中加载，SEO 是检索不到这部分数据的。

nuxt在开发中注意的事项

1.asyncData()和mounted()之前的生命周期钩子里面，拿不到window对象，所以类似于localstorage需要在mounted之后获取。
2.由于是服务端渲染，所以不支持组件的keep-alive，那自然activated、deactivated这两个生命周期也没。

vue项目业务组件转化为nuxt

1.将router.js里的路由,按照层级模式在pages文件夹中复制组件。
2.全局查找window对象和所属window对象的属性，将生命周期钩子mounted之前的window对象改为mounted之后。
3.nuxt替换router-view。
4.nuxt-link替换router-link。

nuxt的打包部署

1.npm run generate该命令打包后每个对应的页面都会生成一个html，你在打包的时候不能关闭后台，他会请求后台数据生成首屏的数据。适用于首屏数据不发生变化的场景。该命令生成的dist文件，直接放到服务器中就可以。
2.npm run build 该命令会生成.nuxt文件，需要将
.nuxt / static / nuxt.config.js /package.json
这些文件放到服务器上，执行npm i, npm run start
如果是挂起执行 nohup npm run start &

观点分享已结束，欢迎大家多多探讨