我的个人网站是用vuecli写的，SEO不忍直视。于是用Nuxt重构了代码，过程中踩了无数坑，记录如下
一：body样式不生效
正常的body样式设置不能生效，需要在nuxt.config.js中配置
1、设置bodyAttrs的class属性，该属性值对应一个类名
2、该类名所在的css文件，需要在nuxt.config.js中设置一下路径
二：store的用法差异
声明时差异：export出一个函数
调用时差异：import的是个函数，所以要先执行函数
三：Nuxt打包
Nuxt打包分为两种，一种是打成静态页面，一种是以SSR的形式打包。
1、打成静态页面
如果需要打包成静态资源，需要执行npm run generate
且nuxt.config.js需要做如下配置
2、SSR打包
npm run build
四：Nuxt的Vuex使用
在plugins文件夹下，放一个vuex.js文件，并在nuxt.config.js中引入。
然后在store文件夹下管理状态才能正常使用
五：引入iconfont
只需要将iconfont的资源文件放在assets文件夹下，然后在nuxt.config.js的css属性写上地址即可
六：引入axios报错
报错信息如下
require() of ES Module /Users/sunquan/WebstormProjects/SunqBlog-UserSide-Nuxt/node_modules/axios/index.js from /Users/sunquan/WebstormProjects/SunqBlog-UserSide-Nuxt/node_modules/vue-server-renderer/build.dev.js not supported. Instead change the require of index.js in /Users/sunquan/WebstormProjects/SunqBlog-UserSide-Nuxt/node_modules/vue-server-renderer/build.dev.js to a dynamic import() which is available in all CommonJS modules.
大概意思是vue-server-renderer需要commonJS规范的组件，但是axios是ES6规范的组件，不能用。后来降低了axios版本后不再报错，版本号为axios@0.18.0。可能是因为老版本用的commonJS规范
七：Nuxt配置本地代理
使用 Nuxt.js 的服务器中间件
1、在 Nuxt.js 项目的根目录下创建一个名为 middleware 的文件夹（如果已存在则跳过此步骤）。
2、在 middleware 文件夹中创建一个名为 proxy.js 的文件，并添加以下代码：
const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (req, res, next) {if (req.url.startsWith('/api')) {// 将请求代理到目标地址createProxyMiddleware('/api', { target: 'http://39.104.22.73:8888/', changeOrigin: true,pathRewrite: {'^/api': '' //路径重写},pathRequiresRewrite: {'^/api': ''}})(req, res, next)} else {next()}
}打开 nuxt.config.js 文件，将以下代码添加到 serverMiddleware 配置项中：
serverMiddleware: ['~/middleware/proxy'
],
重启项目后，以 /api 开头的请求将被代理到 http://api.example.com。
注意：proxy.js中的pathRewrite和pathRequiresRewrite的属性配置，网上的资料都没有写，导致代理不生效。
八：Nuxt2使用echarts5
Nuxt引入echarts有两种方式，
- 使用Nuxt的echarts然后配置
- 直接安装，正常引入即可
我直接使用的第二种，但是引入echarts5时报错。报错Unexpected token export
通常是由于Nuxt.js默认使用的是CommonJS模块系统，而ECharts 5使用ES模块语法所致。需要对ECharts 5的ES模块语法进行转译。
为了解决这个问题，你可以尝试以下方法：
在nuxt.config.js中设置
build: {transpile: [/echarts/, /zrender/]},
其中zrender为echarts依赖的底层组件，注意填写，否则可能无法生效。
配置之后，Nuxt会自动对ES模块进行转义，无需对转义进行额外配置，这个还是很方便的
九：Nuxt到底能做多少SEO优化？
通过Nuxt配置，即使使用了SSR模式，打包后的静态网站在浏览器的Sources面板中仍然无法看到完整的网页内容。这是因为Nuxt.js默认情况下在生成静态文件时只包含首页的DOM结构，其他页面的DOM结构在浏览器中通过客户端渲染动态生成。
Nuxt.js通过服务器端渲染（SSR）模式来解决一些SEO问题，但并不能完全解决所有SEO问题。
如下为使用Nuxt打包成静态页面前后，网站sources面板看到的html
Nuxt 打包成静态页面后，对SEO优化没实质性改善。以SSR打包后，效果会好一些
如下为chatGPT对SSR打包模式的讲解：
虽然在浏览器的"Sources"面板中无法直接看到完整的HTML代码，但搜索引擎爬虫通常可以爬取到Nuxt.js打包的静态网站的完整HTML内容。
当使用Nuxt.js进行服务器端渲染（SSR）并生成静态网站时，每个路由都会被预先生成为一个HTML文件。这些HTML文件包含了相应路由页面的完整静态内容，包括初始化数据、组件内容以及其他相关资源。
搜索引擎的爬虫会模拟浏览器的行为，发送HTTP请求并获取网页内容，爬取到的内容也包括完整的HTML。它们可以处理JavaScript渲染，并从静态HTML中获取页面内容来进行索引。
因此，尽管在浏览器的"Sources"面板中我们无法直接查看到完整的HTML代码，但搜索引擎爬虫通常可以正确抓取和索引由Nuxt.js生成的静态网站的完整HTML内容。
暂且相信它一次，我把Nuxt重构后的代码部署到Nginx上，看看年底百度能不能收录到我的网站。到时候再把结果公布到这里
十：部署到Nginx
1、部署SSR模式包
SSR模式，在本地npm run build后。将如下文件上传到nginx的html目录下
注意Nuxt跟vue-cli是不同的，Nuxt除了.nuxt目录还要上传另外几个文件。然后在nuxt.config.js同级路径下执行，npm install，npm run start。这时服务器的3000端口就跑起了咱的应用
然后，我们需要配置代理，将你需要的端口号（比如80）代理到3000端口上即可
具体就是在nginx.conf里面location中这样配置即可
server {listen 80 default_server;listen [::]:80 default_server;server_name _;#root /usr/share/nginx/html/sqblog/.nuxt/dist/client;index index.html;# Load configuration files for the default server block.include /etc/nginx/default.d/*.conf;location / {proxy_pass http://localhost:3000; proxy_set_header Host $host;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";proxy_set_header X-Real-IP $remote_addr;}
}2、部署静态页面模式网页
相对来说以这种模式打包，部署起来相对简单些。直接单独将dist文件夹上传到Nginx的html路径下即可，无序而外文件。
主要问题一般出在文件读取权限上，即访问时报404。
具体解决办法可以问chatgpt，先创建用户与用户组，然后将文件归属该用户组，最后给文件赋权限即可。
静态网页上传到Nginx的html目录下，依旧需要配置nginx.conf
如果你想将静态网页放在nginx的html的dist文件夹下，并希望在URL的某个端口号后不需要写dist就可以打开页面，你可以尝试使用rewrite规则来实现。如果你希望在不同的端口号上对应不同的文件夹，可以在nginx的配置文件中添加多个server块，每个块指定不同的端口号和对应的文件夹路径。以下是一个示例配置：
server {listen 8080;root /path/to/nginx/html/dist1;index index.html;location / {try_files $uri $uri/ /index.html;}
}server {listen 8081;root /path/to/nginx/html/dist2;index index.html;location / {try_files $uri $uri/ /index.html;}
}
如下为设置post请求代理：
要在Nginx中配置静态网页的POST请求代理，你可以使用proxy_pass指令来将POST请求反向代理到另一个服务器或应用程序。其实就是在上面配置的server模块中，再加一个location。
以下是一个示例配置：
server {listen 80;server_name example.com;location / {root /path/to/your/static/files;try_files $uri $uri/ =404;}location /api {rewrite ^/api(.*)$ $1 break;proxy_pass http://backend_server;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}
}上面示例中，在location /api块中添加了一个rewrite指令。这个指令会把请求URL中的/api前缀去掉，并把剩余部分作为反向代理的路径。
这样，如果你的静态网站中的POST请求以/api开头，Nginx将会代理这些请求至后端服务器，并将响应返回给客户端。URL中的/api前缀将被移除，后端服务器收到的请求将是不带前缀的形式。
代理转发后的效果如下：
// 浏览器看到的请求
http://39.104.22.73/api/getarticlenum/foreend// 代理后实际的请求；
http://39.104.22.73:8888/getarticlenum/foreend十：部署后的启动
关于启动服务
直接npm run start，坚持没几分钟服务就挂了。可以使用forever获得持久的服务
forever start -c "npm run start" ./关于代码更新后，重启服务。首先干掉之前的进程
sudo lsof -i :3000
上述命令将显示占用端口 3000 的进程的详细信息，包括 PID（进程ID）。你需要记下该 PID，然后使用以下命令终止该进程：
kill <PID>如果杀不掉进程，需要先关掉forever进程
forever list // 找到该forever的名称
forever stop 名称 // 关掉forever进程然后重新执行，forever start -c "npm run start" ./
十一：Nuxt不支持svg
Nuxt原生不支持svg格式，需要额外自己安装转换器
