废话不多说,直接上步骤,如下:

本文章为在 vue环境下使用了nuxt.js

1、搭建环境--由于本人安装的是宝塔主机,因此如下:

由于我直接使用的是宝塔主机,直接去“软件管理”安装 PM2管理器。
安装好以后点击“设置”,找到“模块管理”,直接安装需要的模板,我使用的是nuxt,因此我也直接安装了 nuxt。 (这里安装有没有用我目前不太清楚,我只是知道我项目里使用了nuxt,所有我就顺便安装了,时间太忙也就没深入研究了)

2、添加站点

站点添加成功后修改站点配置文件,直接在配置文件顶部增加
upstream nodenuxt {
server 127.0.0.1:3003; #nuxt项目 监听端口
keepalive 64;
}
//以下为之前默认的数据,不用管
server {
listen 80;
server_name mysite.com;
location / {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Nginx-Proxy true;
proxy_cache_bypass $http_upgrade;
proxy_pass http://nodenuxt; #反向代理
}
}

3、设置反向代理

由于以上配置了 127.0.0.1:3003
因此反向代理的目标URL也为 http://127.0.0.1:3003
发送域名:mysite.com //项目的访问域名

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 //配置文件

6、在服务器上部署运行

1. 使用命令模式:终端或者其他方式链接上服务器
2. 自己先测试一下服务器上是否安装支node npm,检查一下版本号
node -v
npm -v
2. 进入到该项目的根目录
3. 运行 npm install 安装package里的依赖
4. 安装好3以后,再运行 npm start 就可以运行起来nuxt的服务渲染了 如下:
> my-nuxt@1.0.0 start /www/wwwroot/mysite.com
> PORT=3003 nuxt start 到了这里我们就可以在浏览器上输入 mysite.com 访问了。服务端渲染瞬间出来了。
#### 别得意,这里还没完成呢。
,上面的效果是并不理想的,所以我们需要开启进程守护来稳定常驻后台

7、pm2 开启进程守护

pm2 start npm --name "my-nuxt" -- run start  //my-nuxt为我们自定义的项目名称,也是我们自定义的守护进程名称

┌──────────┬────┬─────────┬──────┬───────┬────────┬─────────┬────────┬─────┬───────────┬──────┬──────────┐
│ App name │ id │ version │ mode │ pid │ status │ restart │ uptime │ cpu │ mem │ user │ watching │
├──────────┼────┼─────────┼──────┼───────┼────────┼─────────┼────────┼─────┼───────────┼──────┼──────────┤
│ my-nuxt │ 0 │ 0.33.4 │ fork │ 23278 │ online │ 0 │ 0s │ 0% │ 15.6 MB │ root │ disabled │
└──────────┴────┴─────────┴──────┴───────┴────────┴─────────┴────────┴─────┴───────────┴──────┴──────────┘ 出现了以上的图案数据,说明守护进程已经开启了。

OK,到了这里也就完成了,你可以放心的访问你的域名。 就可以正常的访问啦。

以上为我实际操作得出的步骤,如果按照步骤完成还是不能访问,那就很抱歉没能帮到你,你也继续努力....

vue-nuxt.js部署到宝塔主机服务器的更多相关文章

  1. nuxt.js部署vue应用到服务端过程

    由于seo的需要,最近将项目移植道nuxt.js下采用ssr渲染 移植完成后,一路顺畅,但是到了要部署到服务器端上时候,还是个头疼的问题,但最终还是顺利完成.现在记录一下部署中的过程. 注:部署时候过 ...

  2. Nuxt.js部署应用的方式

    Nuxt.js 提供了两种发布部署应用的方式:服务端渲染应用部署 和 静态应用部署. 静态应用部署就不说了,主要说说服务端渲染应用部署. 官方部署方式 关于服务端渲染应用部署,官方文档是这么写的: 部 ...

  3. nuxt.js 部署静态页面[dist]到gh-pages

    一. 1.添加package.json { "name": "nuxtweb001", "version": "1.0.0&quo ...

  4. 从壹开始 [ Nuxt.js ] 之二 || 项目搭建 与 接口API

    前言 哈喽大家周一好,今天的内容比较多,主要就是包括:把前端页面的展示页给搭出来,然后调通接口API,可以添加数据,这两天我也一直在开发,本来想一篇一篇的写,发现可能会比较简单,就索性把项目搭建的过程 ...

  5. vue.js 服务端渲染nuxt.js反向代理nginx部署

    vue.js的官方介绍里可能提到过nuxt.js,我也不太清楚我怎么找到这个的 最近项目vue.js是主流了,当有些优化需求过来后,vue还是有点力不从心, 比如SEO的优化,由于vue在初始化完成之 ...

  6. nuxt.js express模板项目服务器部署

    nuxt版本:0.10.6 技术栈:nuxt.js, express, pm2 部署环境:windows server 之前用nuxt.js 的express的模板项目在windows下用nginx进 ...

  7. next.js、nuxt.js等服务端渲染框架构建的项目部署到服务器,并用PM2守护程序

    前端渲染:vue.react等单页面项目应该这样子部署到服务器 貌似从前几年,前后端分离逐渐就开始流行起来,把一些渲染计算的工作抛向前端以便减轻服务端的压力,但为啥现在又开始流行在服务端渲染了呢?如v ...

  8. [vue] vue服务端渲染nuxt.js

    初始化 使用脚手架工具 create-nuxt-app 快速创建 npx create-nuxt-app <项目名> npx create-nuxt-app 执行一些选择 在集成的服务器端 ...

  9. Nuxt.js vue服务端渲染

    一.为什么要用Nuxt.js 原因其实不用多说,就是利用Nuxt.js的服务端渲染能力来解决Vue项目的SEO问题. 二.Nuxt.js和纯Vue项目的简单对比 1. build后目标产物不同 vue ...

随机推荐

  1. 剑指offer相关问题

    1. 变态跳台阶 Fib(n) = Fib(n-1)+Fib(n-2)+Fib(n-3)+..........+Fib(n-n)         =Fib(0)+Fib(1)+Fib(2)+..... ...

  2. C#调用C++函数

    一.新建C++项目 1.在VS2012中新建->项目->模版->其他语言->Win32->Win32项目->下一步->选DLL,导出符号. 2.在XX.h项目 ...

  3. Python3.x urlib包

    在Python3.x中,我们可以使用urlib这个组件抓取网页,urllib是一个URL处理包,这个包中集合了一些处理URL的模块,如下: 1.urllib.request模块是用来打开和读取URLs ...

  4. Visual Studio强行修改运行平台和注意事项

    默认情况下,会发现项目属性中只有一个Any CPU可供选择,无法修改运行平台. 解决方法如下: 右键“解决方案”,选择“属性”,此时发现每一个项目的平台依然只有Any CPU,点击右上角“配置管理器” ...

  5. Compare DML To Both REDO And UNDO Size

    SUMMARY you can remember undo rule  the same to redo if you want demo rule that you can look up the ...

  6. ZT 线程的分离状态 2012-08-16 17:00:59

    线程的分离状态 2012-08-16 17:00:59 分类: LINUX 其实在写上一篇日志的时候,由于我把创建线程的返回值的判断条件写错了,程序每次运行的时候都是显示创建线程失败,我就百度了一下, ...

  7. [Codeup 25481] swan

    莫名其妙还找到了另一个铟炔锶烃的OJ : Codeup墓地 25481: swan 时间限制: 1 Sec  内存限制: 128 MB献花: 86  解决: 13[献花][花圈][TK题库] 题目描述 ...

  8. HTTP协议图--HTTP 响应状态码(重点分析)

    1. 状态码概述 HTTP 状态码负责表示客户端 HTTP 请求的返回结果.标记服务器端的处理是否正常.通知出现的错误等工作. HTTP 状态码如 200 OK ,以 3 位数字和原因短语组成.数字中 ...

  9. Linux性能监控(程序篇)

    性能数据的监控,除了针对整机进行外,还要求我们对某一运行的程序单独进行.常用的程序监控命令有ps和top. Ps ps命令最常用的还是用于监控后台进程的工作情况,因为后台进程是不和屏幕键盘这些标准输入 ...

  10. Hive安装报错

    安装好hive后在bin路径下输入hive报错: [ERROR] Terminal initialization failed; falling back to unsupported 原因是hado ...