29. 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.cercert.key

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

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

image-20231104225509213

然后编辑配置文件: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这个大括号的内部,任意位置均可:

image-20231104225724426

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

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

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

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

2.4 快捷链接

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

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

作者:余识
全部文章:0
会员文章:0
总阅读量:0
c/c++pythonrustJavaScriptwindowslinux