Nuxt.js开启SSR渲染
  技术分享   0 评论   478 浏览量

Nuxt.js开启SSR渲染

  技术分享   0 评论   478 浏览量

项目介绍

这是 Nuxt 最受欢迎的模式。利用 SSR(也叫做 "universal" or "isomorphic" 模式),Node.js 服务器将基于 Vue 的组件渲染成 HTML 并传输到客户端,而不是纯 javascript。与传统的 Vue SPA 相比,使用 SSR 将带来巨大的 SEO 提升、更好的用户体验和更多的机会。官方文档

因为由开发者独立实现 SSR 将会非常繁琐,Nuxt.js 对此提供了开箱即用的全面支持,并帮你规避常见的陷阱。

项目创建

1$ yarn create nuxt-app <项目名>

构建项目可能会失败,此时我们可以更新node的版本,如果是linux系统npm cache && npm install -g n --forcen 14.4.0n latestn stable。如果是windows系统就需要使用gnvm,下载后将文件拷贝到D:\Program Files\nodejsnode的安装目录gnvm version gnvm update latest gnvm use 16.15.0,如果怕麻烦直接官网下载覆盖以前的版本【v14.7.1 -> v16.15.0】就好。执行yarn dev,浏览器访问http://localhost:3000/就好了。

接下来就是将我们之前的vue项目替换成nuxt项目了。首页的替换进入home/index.vue。子组件的添加,新建目录components,将所有的组件放在下方,即可直接使用,不需要通过import引入。

初始化的index.vue内容

1<template>
2  <Tutorial/>
3</template>
4<script>
5export default {
6  name: 'IndexPage'
7}
8</script>

Vue项目转Nuxt

修改nuxt.config.js,加一行srcDir: 'src/'。将assets,components,middleware,layouts,pages,plugins,store拷贝进去。关闭eslint检查nuxt.config.js下注释buildModules即可。一定记得还要改jsconfig.json文件。

组件命名规范:全驼峰命名,组件命名前面加上Nuxteg:NuxtLayoutSlot

scss配置npm install --save-dev sass sass-loader。Webpack插件 / 注册全局模块(如lodash)

 1postcss: {
 2  plugins: {
 3    autoprefixer: {}
 4  }
 5},
 6plugins: [
 7  new webpack.ProvidePlugin({
 8    '_': path.resolve(__dirname, './src/lodash.js')
 9  })
10],

使用代码router,而不是nuxt自动生成的导航配置。执行npm install --save @nuxtjs/router,修改配置文件
添加modules: [ '@nuxtjs/router' ],。router.js写在src/下,需要略微改变写法,导出为createRouter函数:

 1export function createRouter () {
 2  let router = new Router({
 3    mode: 'history',
 4    base: process.env.BASE_URL,
 5    routes: [
 6      { path: '/', name: 'index', component: Index },
 7      { path: '/about', name: 'about', component: About }
 8    ]
 9  })
10  return router
11}

router.js中移除所有的异步加载

Vuex的引入:

所有css样式文件的引入,使用sass时,执行yarn add sass sass-loader。可能会有版本过高的情况,因此需要安装指定版本执行yarn add sass-loader@8.0.2即可。引入css,scss资源,新建assets/css目录,然后进入nuxt.config.js文件配置,即可

 1module.exports = {
 2  css: [
 3    // 直接加载一个 Node.js 模块。(在这里它是一个 Sass 文件)
 4    'bulma',
 5    // 项目里要用的 CSS 文件
 6    '@/assets/css/main.css',
 7    // 项目里要使用的 SCSS 文件
 8    '@/assets/css/main.scss'
 9  ]
10}

引入图片【png,svg,jpng】资源,新建目录assets/img,将资源放入,使用~/assets/img/image.png,即可引入。项目中的国际化可以使用vue-i18n实,执行yarn add vue-i18n,新建目录plugins/i18n.js,修改nuxt配置文件添加plugins: ['@/plugins/i18n.js'],同时新建目录locals,将json文件放入。知乎,新建store/index.js,新建middleware,配置路由中间件router: { middleware: 'i18n' },

nuxt中不识别import的解决方法:本质上使用common.js和es6模块化的区别。使用require引入。或者
yarn add babel-preset-env yarn -g add babel-cli,修改dev脚本后面加上-exce babel-node,修改文件.babelrc,添加"presets":["env"]。
vue-i18n版本不对,yarn add vue-i18n@8.26.3 & yarn add vue-i18n-bridge@9.2.0-beta.10即可。

异步数据的获取。asyncData的回调,进入路由就会执行。会将路由的参数带上。全局配置baseURL,打开nuxt配置文件,直接配置即可。

配置端口号:在配置文件加入server: { port: 8000, // default: 3000 host: '0.0.0.0' // default: localhost }重启服务即可。

使用全局过滤器,新建filters.js文件,修改nuxt配置文件plugins: [ { src: '~plugins/filters.js', ssr: true } ]或者直接@/plugins/filters.js

添加评论组件"twikoo":"1.4.18",执行 yarn add twikoo@1.4.18,我这边yarn安装失败了,使用cnpm install --save twikoo安装好了。rimraf node_modules。nuxt无法直接引入第三方的库,需要配置build: { vendor:['external_library'] },,然后加判断process.browser才可以。

~ 和@的配置:

head处引入css样式文件:

1head: {
2  link: [
3    {
4      rel: 'stylesheet',
5      href: 'https://cdn.jsdelivr.net/gh/616620131/photo-page-for-typecho@2.0/Multiverse/css/fontawesome-all.min.css'
6    }
7  ]
8}

需要使用vditor进行解析后端传的markdown文件,执行"vditor": "^3.8.7", yarn add vditor即可。
引入"@fancyapps/ui": "^4.0.11",yarn add @fancyapps/ui即可。vditor有点样式bug,需要手动修改下。新建文件base.scss,将其导入项目中。引入Headroom,通过cdn方方式引入,修改配置文件就可以。live2d-widget 执行 yarn add live2d-widget。引入"js-cookie": "^3.0.1",执行 yarn add js-cookie。vditor不需要在使用preview方法构造,但是需要引入cdn样式资源才可以

取消对已经跟踪的文件名:git rm --cached 文件名。直接使用git commit -m "" git push origin master就行了。

使用Docker部署

首先使用xshell连接阿里云的linux服务器,然后使用git clone https://gitee.com/mcan/zip-blog-nuxt.git,然后编写Dockerfile。

 1FROM node:16.15.0
 2# 创建容器内的项目存放目录
 3RUN mkdir -p /home/nodeapp
 4WORKDIR /home/nodeapp
 5COPY . /home/nodeapp
 6RUN cd /home/nodeapp 
 7RUN chmod -R 777 *
 8# 全局安装cnpm
 9#RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
10# 全局安装yarn
11#RUN npm install -g yarn --registry=https://registry.npm.taobao.org
12RUN yarn install
13RUN yarn build
14RUN ls -l -a
15# 容器对外暴露的端口号,要和node项目配置的端口号一致
16EXPOSE 8091
17# 容器启动时执行的命令
18CMD ["sh", "-c", "yarn start"]

执行命令docker build -f Dockerfile -t zipblog-nuxt .

运行镜像,生成容器docker run -p 3000:8091 --name zipblog-nuxt01 -d --rm zipblog-nuxt即可。

启动脚本,有时候服务器会因为内存溢出导致宕机,重启服务的脚本如下

 1systemctl stop mysqld
 2systemctl start docker
 3# 数据库
 4docker start zipmysql02
 5# lute
 6docker start ziplute
 7# redis
 8docker start zipredis
 9# server
10docker start zipblog
11# client
12docker start zipblogclient

项目中使用cookie,执行cookie-universal-nuxt 执行 yarn add cookie-universal-nuxt,然后再项目中配置modules: [ 'cookie-universal-nuxt' ]即可。

1//设置cookie
2this.$cookies.set('token', 123456,{ maxAge: 60 * 60 * 24 * 30 })
3//获取cookie
4this.$cookies.get("token")
5//移除cookie
6this.$cookies.remove('token')
7//acyncData中使用
8app.$cookies.get("token")

安装播放器@moefe/vue-aplayer,执行yarn add @moefe/vue-aplayer 即可。配置文件添加{src:'@/plugins/aplayer.js',ssr: false}

前端重启容器的脚本执行

1cd /zipBlog/zip-blog-nuxt && git pull && docker stop zipmysql02 && docker stop nuxt && docker build -f Dockerfile -t zipblog-nuxt . && docker run -e TZ="Asia/Shanghai" -p 3000:8091 --name nuxt -d --rm zipblog-nuxt && docker start zipmysql02

后台重启容器所执行的脚本,linux执行git pull的时候不需要输入密码,切到根目录,执行git config --global credential.helper store。然后执行git pull会让用户输入一次密码,之后就再也不用输入了。

1cd /zipBlog/zipBlogServer && git pull  && docker stop zipblog && mvn package -DskipTests &&  docker build -f DockerfileDemo -t zipblogserver . && docker run -d -p 8090:8090 --name zipblog --rm zipblogserver

分析

load:当整个页面及所有依赖资源如样式表和图片都已完成加载时,将触发load事件。
DOMContentLoaded:当纯HTML被完全加载以及解析时,DOMContentLoaded 事件会被触发,而不必等待样式表,图片或者子框架完成加载。

可以看出当项目初始化的时候,执行yarn build,yarn start,参考以下的截图

init-nuxt-performance.png

document类型的大小是3.7KB,请求到时间是5mm。解析纯html的时长是315mm,加载完成是321mm。生产环境与开发环境的性能又不一样,lighthouse会提醒开发者启用文本压缩,响应主文档的时间太长。使用腾讯云开发生成的环境id,发送评论请求最大耗时为481mm。

twikoo-response-time.png

本文由 木之下 发表, 最后编辑时间为:2022-05-26 15:36:23
(完)