说在前面的话

vue.js开发的SPA是不利于seo的,搜索引擎对它支持的并不是太好,百度根本就不可以在SPA应用的页面抓取数据,这对很看重seo优化的网站来说肯定是不能容忍的。而使用nuxt开发的网站就可以让爬虫爬取,而且它是基于vue.js开发的服务端渲染应用框架,上手极快,大大的简化了SSR的开发难度。

基于vue3的nuxt3请查看:https://blog.csdn.net/dan_seek/article/details/140079231

本机环境和部署环境

操作系统:Windows10、centos7

nodejs:v13.0.1

npm: v6.12.0

nuxtjs:v2.8

下面的操作npm版本最低要v5.2哦

如果版本太低请先使用n命令升级

1.先全局安装工具n:

npm install -g n 

2.升级node.js到最新稳定版

n stable

创建nuxt项目

1、使用create-nuxt-app脚手架创建项目,项目名test-nuxt

npx create-nuxt-app test-nuxt

或者用yarn :

yarn create nuxt-app test-nuxt

接下来创建向导会让你做些选择,这些选择都是为了更方便的搭建项目用的,选错了也没关系,后续可以在项目里修改

// 第1步 项目名
? Project name (test-nuxt)
// 第2步 项目描述
? Project description (My mind-blowing Nuxt.js project)
// 第3步 输入作者
? Author name ()

// 第4步 选择包管理工具,这里我选择npm
? Choose the package manager 
  Yarn
> Npm

// 第5步 选择UI框架
? Choose UI framework (Use arrow keys)
> None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuetify.js
  
  // 第6步 选择默认服务器
  ? Choose custom server framework
  None (Recommended)
  AdonisJs
  Express
  Fastify
  Feathers
  hapi
> Koa
  Micro
  
 // 第7步 选择安装axios,使用空格选中
? Choose Nuxt.js modules
>(*) Axios
 ( ) Progressive Web App (PWA) Support
 
 // 第8步 选择安装eslint
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) ESLint
 ( ) Prettier
 ( ) Lint staged files
 
 // 第9步 选择安装测试框架
 ? Choose test framework (Use arrow keys)
> None
  Jest
  AVA
  
  //第10步 这里一定要选择ssr,否则还是单页应用
  ? Choose rendering mode (Use arrow keys)
> Universal (SSR)
  Single Page App
  //第11步 是否生成jsconfig配置
  >( ) jsconfig.json (Recommended for VS Code)
  
  // 然后就等待片刻
  \ Installing packages with npm

2、启动,进入test-nuxt目录运行

npm run dev

然后就可以使用 http://localhost:3000 访问了

部署nuxt项目

1、先build项目,在test-nuxt目录执行下面命令,或者使用webstorm中的build

npm run build

2、服务器新建一个目录,用来放打包后的项目文件(比如:/mnt/projects/nuxt)

3、把package.json、nuxt.config.js、static目录、.nuxt目录共4个拷贝至服务器(比如:nuxt目录)
搭建和部署nuxt项目
4、进入nuxt目录,执行 npm install 安装依赖

npm install

5、启动服务

npm start

nuxt默认端口是3000,如果想要修改,需要在nuxt.config.js添加如下配置:

  server: {
      port: 9000, // default: 3000
      host: '127.0.0.1', // default: localhost
  },

注意:上面的host配置,centos7写localhost,nuxt服务会起不来

6、配置nginx,可以使用域名访问

server{
         listen  443;
         server_name t.xxx.cn;
         ssl on;
         ssl_certificate   /etc/nginx/cert/t/2051951_t.xxx.cn.pem;
         ssl_certificate_key  /etc/nginx/cert/t/2051951_t.xxx.cn.key;
         ssl_session_timeout 5m;
         ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
         ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
         ssl_prefer_server_ciphers on;
         # 如果不需要https访问,把上面的删除,修改成下面两行
         # listen 80;
    	 # server_name t.xxx.cn;
         
		 location / {
			proxy_pass http://localhost:3000; # 反向代理至nuxt服务器
		 } 
     }

然后在域名解析里配置一条A记录指向服务器IP,如果是https还得配置一条txt记录

7、reload nginx服务

nginx -s reload

这个时候,我们就可以使用https://t.xxx.cn访问刚刚部署的网站了

安装pm2

当我们执行上面的操作后,我们的项目已经可以跑起来了,但是关闭shell后,就访问不了了。而pm2是一个进程管理工具,它可以让nuxt进程在后台运行。

1、全局安装pm2

npm install pm2 -g

2、使用pm2管理nuxt进程,让它常驻后台,先进入项目目录,然后执行下面命令(比如:nuxt目录)

pm2 start npm --name "test-nuxt" -- start

这里的name取一个有意义的就行,不需要和 package.json里面的name {“name”: “test-nuxt” … }对应。

其他

怎么关闭呢?使用stop即可,后面可以接id或者name

pm2 stop 0 #或者 pm2 stop "test-nuxt"

启动 pm2 start 0 ;重启 pm2 restart 0

使用pm2 list可以查看当前正在运行的进程

pm2 list
Logo

前往低代码交流专区

更多推荐