likes
comments
collection
share

Nuxt重构填坑

作者站长头像
站长
· 阅读数 19

我的个人网站是用vuecli写的，SEO不忍直视。于是用Nuxt重构了代码，过程中踩了无数坑。且发现网上相关资料其实并不多，故总结如下

一：body样式不生效

正常的body样式设置不能生效，需要在nuxt.config.js中配置

1、设置bodyAttrs的class属性，该属性值对应一个类名

2、该类名所在的css文件，需要在nuxt.config.js中设置一下路径

Nuxt重构填坑

二：store的用法差异

声明时差异：export出一个函数

Nuxt重构填坑

调用时差异：import的是个函数，所以要先执行函数

Nuxt重构填坑

三：Nuxt打包

Nuxt打包分为两种，一种是打成静态页面，一种是以SSR的形式打包。

1、打成静态页面

如果需要打包成静态资源，需要执行npm run generate

且nuxt.config.js需要做如下配置

Nuxt重构填坑

2、SSR打包

npm run build​​

四：Nuxt的Vuex使用

在plugins文件夹下，放一个vuex.js文件，并在nuxt.config.js中引入。

然后在store文件夹下管理状态才能正常使用

Nuxt重构填坑

Nuxt重构填坑

​

五：引入iconfont

只需要将iconfont的资源文件放在assets文件夹下，然后在nuxt.config.js的css属性写上地址即可

Nuxt重构填坑

六：引入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 开头的请求将被代理到 api.example.com。

注意：proxy.js中的pathRewrite和pathRequiresRewrite的属性配置，网上的资料都没有写，导致代理不生效。

八：Nuxt2使用echarts5

Nuxt引入echarts有两种方式，

  1. 使用Nuxt的echarts然后配置

  2. 直接安装，正常引入即可

我直接使用的第二种，但是引入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重构填坑

未使用Nuxt generate前的Source

Nuxt重构填坑

​

使用Nuxt generate后的source

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重构填坑

​

注意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格式，需要额外自己安装转换器

转载自:https://juejin.cn/post/7261894465064894501
评论
请登录