搭建和部署nuxt项目

简介: 【8月更文挑战第4天】

说在前面的话
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
1
2.升级node.js到最新稳定版

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

npx create-nuxt-app test-nuxt
1
或者用yarn :

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

// 第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 to select, to toggle all, 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
2、启动,进入test-nuxt目录运行

npm run dev
1
然后就可以使用 http://localhost:3000 访问了

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

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

3、把package.json、nuxt.config.js、static目录、.nuxt目录共4个拷贝至服务器(比如:nuxt目录)

4、进入nuxt目录,执行 npm install 安装依赖

npm install
1
5、启动服务

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

server: {
port: 9000, // default: 3000
host: '127.0.0.1', // default: localhost
},
1
2
3
4
注意:上面的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服务器
     } 
 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
然后在域名解析里配置一条A记录指向服务器IP,如果是https还得配置一条txt记录

7、reload nginx服务

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

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

1、全局安装pm2

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

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

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

pm2 stop 0 #或者 pm2 stop "test-nuxt"
1
启动 pm2 start 0 ;重启 pm2 restart 0

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

pm2 list

相关文章
|
存储 应用服务中间件 nginx
nuxt3:我们开始吧-开发-配置-部署(三)
nuxt3:我们开始吧-开发-配置-部署(三)
1736 0
|
JavaScript 中间件 API
nuxt3:我们开始吧-开发-配置-部署(一)
nuxt3:我们开始吧-开发-配置-部署(一)
1310 0
|
人工智能 JavaScript Linux
Nuxt.js在centos7上的发布部署
Nuxt.js在centos7上的发布部署
302 0
Nuxt.js在centos7上的发布部署
|
中间件 API
nuxt3:我们开始吧-开发-配置-部署(二)
nuxt3:我们开始吧-开发-配置-部署(二)
634 0
Nuxt.js run build 之后生成的 dist 文件夹在哪
Nuxt.js run build 之后生成的 dist 文件夹在哪
615 0
|
JavaScript Linux
linux安装pm2全过程
你要在linux上安装pm2有很多方法,但我是用node的工具npm来完成安装的,所以在安装pm2之前需要先安装node
4688 1
|
JavaScript 前端开发 搜索推荐
Nuxt4.0初体验:一个简约、精美、现代化的个人站点导航!
这篇文章介绍了作者使用Nuxt 4.0重构个性化站点导航网站的经历,阐述了Nuxt 4.0的新特性和优势,如更清晰的项目结构、更好的TypeScript体验、更快的CLI和开发速度等,并且分享了重构过程中的体验和项目完成效果。同时,作者还对比了Nuxt.js与Next.js两个框架的优劣,表达了自己对Nuxt.js的偏好。
176 0
Nuxt4.0初体验:一个简约、精美、现代化的个人站点导航!
|
前端开发
input输入框只能输入数字且保留两位小数场景演练(金额)
input输入框只能输入数字且保留两位小数场景演练(金额)
|
11月前
|
存储 缓存 固态存储
固态硬盘寿命一般多少年?
随着科技的飞速发展,固态硬盘(SSD)已经成为现代计算机存储设备的重要组成部分。相比传统的机械硬盘(HDD),固态硬盘具有速度更快、抗震性强、功耗低、噪音小等优点。不过,很多人对固态硬盘的寿命依然存在疑虑。本期内容就要和大家深度聊一聊固态硬盘寿命的方方面面。
固态硬盘寿命一般多少年?
|
10月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
2087 4