1.部署nuxt项目到服务器；
由于vue做出来的项目不利于SEO，所以采用服务端渲染 Nuxt 进行项目改造
1.1 打包nuxt项目
npm run build 后会在 .nuxt 文件中生成一个 dist 文件夹；
/.nuxt/dist.png
1.2 将以下5个文件放入服务器；
1.2.1 新建pc_nuxt文件夹 mkdir pc_nuxt,将下面的文件放入；
.nuxt 放置一些配置规则的文件；
static 静态资源；
app.html 项目目录默认没有默认模板，可选；
nuxt.config.js nuxt的配置文件；
package.json 所有需要用到的包；
image.png
1.2.2 安装项目所需要的包文件
npm install
到这里项目已经上传到服务器，就可以运行了。
image.png
1.2.3 启动nuxt项目
npm run start
看到下面的提示，说明已经成功
image.png
当在浏览器输入 http://localhost:3000/ 一切却没有我们想的那么顺利，继续；
很显然，这是在服务器里开启的是一个nuxt的内置服务器，如果要访问它，
就必须要反向代理
2. Nginx 配置反向代理
这里就不在赘述nginx的安装等操作，不会的童靴请自行百度。
执行如下命令：
cd etc/nginx
vim nginx.conf
键入如下代码 server_name 是你的域名地址；
proxy_pass http://127.0.0.1:3000 则是上面nuxt启动的项目地址；
意思是，当访问 www.xxx.com 的时候nginx帮我们代理到 http://127.0.0.1:3000 ；
image.png
浏览器输入域名地址 ojbk；成功访问，问题解决。
3. pm2部署nuxt项目
全局安装：
npm i -g pm2
在项目目录下：
pm2 start npm --name 'pc-nuxt' -- run start将nuxt项目跑在了pm2上，并且命名为 pc-nuxt；
4. 撸一个免费的ssl证书
免费的ssl证书有很多，大家可百度，我推荐使用腾讯云，下面是具体流程
进入腾讯云
-
打开控制台
image.png
2.点击云产品 选择ssl证书
image.png
-
选择 申请免费证书
image.png
-
填写个人信息
image.png
等待申请通过并通过审核 约10几分钟；
成功后将证书下载
image.png
下载成功后将nginx的文件夹放入服务器目录 /ssl
配置nginx下图所示：
image.png
到这里就全部done了。
网友评论