vue seo利器nuxt.js的使用，配置，部署

Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性

创建nuxt项目

新建 package.json 文件用来设定如何运行 nuxt：

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt", 
    "start": "nuxt start",
    "build": "nuxt build"
  }
}

安装 `nuxt`

一旦 package.json 创建好，可以通过以下 npm 命令将 nuxt 安装至项目中：

$ npm install --save nuxt

pages 目录

创建 pages 目录：
Nuxt.js 会依据 pages 目录中的所有 *.vue 文件生成应用的路由配置。

$ mkdir pages

创建我们的第一个页面 pages/index.vue：

<template>
  <h1>Hello world!</h1>
</template>

然后启动项目：

$ npm run dev

现在我们的应用运行在 http://localhost:3000 上运行。

nuxt打包后CSS不会被单独打包到一个文件中

无论是写在页面的css 或引入的css，打包后css代码都是显示在外的，不利于SEO

<template>
   <div>xxx</div>    
</template> 
<style>
@import "../static/css/index.css";
</style>

解决方法：新建nuxt配置文件： nuxt.config.js

export default {  
  build: {
    extractCSS: { allChunks: true }
  }
}

打包：npm run build
运行：npm run start
现在css就不会在外显示了

nuxt部署到服务器

1、用宝塔举例：宝塔面板 “软件管理” 安装 PM2管理器

2、站点添加成功后修改站点配置文件，直接在配置文件顶部增加

upstream nodenuxt {
    server 127.0.0.1:3003; #nuxt项目 监听端口
    keepalive 64;
}

321.png

3、设置反向代理
由于以上配置了 127.0.0.1:3003 ，因此反向代理的目标URL也为 http://127.0.0.1:3003

4、本地项目下的package.json里设置, 注意：start 使用了3003端

"scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    "online": "cross-env NODE_ENV=production nuxt start",
    "build": "nuxt build",
    "start": "PORT=3003 nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },

5、项目本地完成后， npm run build 打包应用

打包完成后将以下四个文件上传到服务器空间
.nuxt     //打包生成的文件夹
static    //默认静态文件
nuxt.config.js   //nuxt项目配置文件
package.json   //配置文件
plugins  //plugins目录视情况而定

6、在服务器上部署运行

使用命令模式：终端或者其他方式链接上服务器
进入到该项目的根目录; 查看所有目录：ls -all cd .. 进入
运行 npm install 安装package里的依赖
安装好以后，再运行 npm start 就可以运行起来nuxt的服务渲染了

my-nuxt@1.0.0 start /www/wwwroot/my.com
PORT=3003 nuxt start

到了这里我们就可以在浏览器上输入 my.com 访问了。服务端渲染瞬间出来了。

别得意，这里还没完成呢
上面的效果是并不理想的，关闭命令台就无法访问，所以我们需要开启进程守护来稳定常驻后台

5、pm2 开启进程守护
以下命令：my-nuxt为我们自定义的项目名称，也是我们自定义的守护进程名称。自行替换
//可直接运行如下命令，如果卡住无效，可以ctrl+c关闭后，再运行如下命令

pm2 start npm --name "my-nuxt" -- run start

pm2 list 查看所有进程

出现如下图：也就完成了，你可以放心的访问你的域名啦！

332.png

如需要关闭：

pm2 stop all // 停止所有的应用程序
pm2 stop 0 // 停止 id为 0的指定应用程序

以上实现的是关门命令台后仍然能访问，但重启后并不会自动启动

常见问题

Cannot find module '@nuxt/ufo'

//安装即可  
npm i @nuxt/ufo

最后编辑于：2021.03.01 13:10:42