开发随笔-25. nuxt使用经验分享

1 介绍

原本该网站是我用rust中的rocket库开发的服务器，vue3开发的主页面、纯js、html、css开发的文章页面。

但随着网站功能的逐渐丰富，代码量的增加，导致我想要继续维护、增添功能都变得越发困难，因为那意味着我要同时维护三个项目。

这个过程非常的痛苦，而痛苦的根源原因便是，我最开始过高看重了所谓的性能。

而事实上，对于我这种小网站来说，性能并不是最要紧的，因为流量并没有想象中的那么大，并且nodejs的性能也并没有想象中的那么差，因此最终我选择了使用nuxt库来重构本网站。

这个过程大概花费了不到一周的时间便完成了绝大部分功能，而这还是我边学边写代码的情况下完成的，这足以说明该框架有多么优秀了。

本文则用来记录一下我使用该框架的过程中所遇到的一些坑与理解。

2 问题列表

2.1 路由

nuxt默认使用文件夹pages作为路由，只要你创建了这个文件夹，nuxt就会自动将这个文件夹中的vue组件映射为路由，无需你自己写。

并且pages/index.vue将作为其根目录，也就是/目录所使用的页面。

但这个的前提是，你需要在根目录下的app.vue文件中添加NuxtPage组件：

<template>
  <NuxtPage />
</template>

除此之外就无需管这个文件了，后面的代码开发直接在pages中进行即可。

此后所有写在该目录下的vue代码文件都会被映射为相应的路由。

2.2 预渲染

使用nuxt框架最大的理由还是在于它允许服务器端渲染，这对于搜索引擎优化非常重要。

这可以通过其提供的useFetch函数来实现，这个函数可以用来获取服务器的数据，并将其渲染到页面上。

但和普通的客户端渲染不同，它可以实现在服务器端便完成页面的渲染生成，然后返回渲染好的页面。

这是其搜索引擎优化的关键，因为这代表着它可以直接返回一个带内容的html页面，可以直接被搜索引擎抓取到。

但要注意，不要在onMount之类的函数中使用，直接在外部正常使用即可，否则服务端渲染会失效。

个人推荐只在需要预渲染的文章页面用它，其它地方使用更通用的axio库更好，即使有一天想要换其它框架，也不需要改动太多的代码。

2.3 发布

开发完成后，运行npm run build，会将其所有的代码都生成在.output文件夹中。

由于一般我们都是在windows系统下开发，然后上传到linux服务器上，所有你需要将其压缩打包，然后上传到服务器解压后使用。

其虽然支持https，但官方并不推荐，所以其默认只能用http协议运行，命令就是node ./.output/server/inded.mjs。

同时为了更好的利用服务器性能，一般我们也不会像上面这样直接运行，而是会使用pm2工具。

安装命令为 npm i pm2 -g。

安装完成后，你可以直接在.output文件夹同目录下创建一个名为ecosystem.config.js的文件，然后输入以下内容：

module.exports = {
  apps: [
    {
      name: 'NuxtAppName',
      port: '3000',
      exec_mode: 'cluster',
      instances: 'max',
      script: './.output/server/index.mjs'
    }
  ]
}

name可以改成自己的程序名，然后直接在当前目录下，运行pm2 start命令就可以启动了。

如果想要启用https，那么你需要自己去一些网站上申请证书，很多都是免费的。

比如我申请得到了两个证书文件：cert.cer、cert.key。

你可以下载安装nginx工具：sudo apt install nginx。

然后将你的这两个文件上传、复制到目录/etc/nginx下：

然后编辑配置文件：sudo vim nginx.conf，将下面这段配置内容复制进去：

    server {
       listen       443 ssl;
       server_name  localhost;

       ssl_certificate      cert.cer;
       ssl_certificate_key  cert.key;

       ssl_session_cache    shared:SSL:1m;
       ssl_session_timeout  5m;

       ssl_ciphers  HIGH:!aNULL:!MD5;
       ssl_prefer_server_ciphers  on;

       location / {
           proxy_pass http://127.0.0.1:3000; #反向代理
       }
    }

注意要复制到http这个大括号的内部，任意位置均可：

它的目的就是代理，因为前面其默认监听的是所有ip地址的3000端口，所以这里就选择代理局域网127.0.0.1的3000端口。

然后启动nginx服务器即可，直接输入nginx，或者 sudo nginx。

此时它的运行逻辑就是，nginx是一个https服务器，客户端都是连接到nginx上的，然后nginx又将所有的请求转发到前面我们自己启动的服务器上。

反过来亦然，说简单点，它就是一个中转站。

2.4 快捷链接

在将Window开发后构建得到的.output文件夹，我需要将其压缩上传到linux服务器上，此时就会出现问题，因为nuxt构建后的文件里面存在大量的快捷方式，而Windows与Linux的快捷方式并不相同，因此上传到服务器就会出问题。

经过我的大量测试，最佳方式就是使用7zip进行压缩与解压，可以很好的解决这个问题。

25. nuxt使用经验分享