项目介绍

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

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

项目创建

Copy$ yarn create nuxt-app <项目名>
shell

构建项目可能会失败，此时我们可以更新node的版本，如果是linux系统npm cache && npm install -g n --force，n 14.4.0，n latest，n 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内容

Copy<template>
  <Tutorial/>
</template>
<script>
export default {
  name: 'IndexPage'
}
</script>
js

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）

Copypostcss: {
  plugins: {
    autoprefixer: {}
  }
},
plugins: [
  new webpack.ProvidePlugin({
    '_': path.resolve(__dirname, './src/lodash.js')
  })
],
js

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

Copyexport function createRouter () {
  let router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
      { path: '/', name: 'index', component: Index },
      { path: '/about', name: 'about', component: About }
    ]
  })
  return router
}
js

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

Vuex的引入：

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

Copymodule.exports = {
  css: [
    // 直接加载一个 Node.js 模块。（在这里它是一个 Sass 文件）
    'bulma',
    // 项目里要用的 CSS 文件
    '@/assets/css/main.css',
    // 项目里要使用的 SCSS 文件
    '@/assets/css/main.scss'
  ]
}
js

引入图片【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样式文件：

Copyhead: {
  link: [
    {
      rel: 'stylesheet',
      href: 'https://cdn.jsdelivr.net/gh/616620131/photo-page-for-typecho@2.0/Multiverse/css/fontawesome-all.min.css'
    }
  ]
}
js

需要使用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服务器，执行yum install git -y，然后使用git clone https://gitee.com/mcan/zip-blog-nuxt.git，然后编写Dockerfile。

CopyFROM node:16.15.0
# 创建容器内的项目存放目录
RUN mkdir -p /home/nodeapp
WORKDIR /home/nodeapp
COPY . /home/nodeapp
RUN cd /home/nodeapp 
RUN chmod -R 777 *
# 配置下载镜像
# npm config set registry https://registry.npmmirror.com https://registry.npm.taobao.org
# npm config get registry
# 全局安装cnpm
#RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
# 全局安装yarn
#RUN npm install -g yarn --registry=https://registry.npm.taobao.org
RUN yarn install
RUN yarn build
RUN ls -l -a
# 容器对外暴露的端口号，要和node项目配置的端口号一致
EXPOSE 8091
# 容器启动时执行的命令
CMD ["sh", "-c", "yarn start"]
bash

执行命令docker build -f Dockerfile -t blog-nuxt:v1.0.0 .

centos8中运行镜像，生成容器docker run -p 3000:8091 --name nuxt -d --rm blog-nuxt即可。走到这步就需要更改nginx的配置。由于8091端口在安全组没有配置。因此需要更改nginx的配置。也即配成proxy_pass http://121.199.58.113:8080;如果不想使用docker部署，可以安装node的环境yum install nodejs，官网下载node包linux版本。解压。使用wget命令下载https资源，然后解压tar -xvf，删除压缩包rm -rf，设置npm软连。安装开发工具yum groupinstall 'Development Tools'，彻底删除重新安装重新安装node。npm list -g找到全局安装目录。最终执行使用pm2启动nuxt项目。webstorm调试工具debugger的使用

0.0.0.0:3000->8091/tcp 左边是客户端的端口，右边是docker中的端口

Copyln -s /root/node-v20.9.0-linux-x64/bin/node /usr/local/bin/node
node -v
ln -s /root/node-v20.9.0-linux-x64/bin/npm /usr/local/bin/npm
npm -v
bash

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

Copysystemctl stop mysqld
systemctl start docker
# 数据库
docker start zipmysql02
# lute
docker start ziplute
# redis
docker start zipredis
# server
docker start zipblog
# client
docker start zipblogclient
bash

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

Copy//设置cookie
this.$cookies.set('token', 123456,{ maxAge: 60 * 60 * 24 * 30 })
//获取cookie
this.$cookies.get("token")
//移除cookie
this.$cookies.remove('token')
//acyncData中使用
app.$cookies.get("token")
js

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

前端重启容器的脚本执行

Copycd /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
bash

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

Copycd /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
bash

分析

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

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

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