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

本文章为在 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. zabbix_3.0安装部署与中文支持

    Zabbix 3.0界面焕然一新,一改10多年的老面孔,alpha4的更新具体记录如下:http://www.zabbix.com/rn3.0.0alpha4.php What's New in 3. ...

  2. MySQL高可用架构之Keepalived+主从架构部署

    针对目前公司的数据库架构要做统计规划和调整,所以针对不同的业务环境要选择合适的架构就比较重要,同时作为运维人员又要考虑到维护的便捷性(不能做过多架构维护),最终停留在mha+vip/主从+vip/my ...

  3. 实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)

    //校验是否全由数字组成 function isDigit(s) { var patrn=/^[0-9]{1,20}$/; if (!patrn.exec(s)) return false retur ...

  4. Docker相关连接

    docker-compose文档:https://docs.docker.com/compose/compose-file/ dockerfile文档:https://docs.docker.com/ ...

  5. kotlin lateinit

    声明变量: private var a: String? = "" 或者:private lateinit var a: String // 使用前先初始化

  6. Python实例---抽屉后台框架分析

    1.1. 抽屉框架分析 --登陆注册分析 1.2. 前台获取form表单补充知识: <!DOCTYPE html> <html lang="en"> < ...

  7. 乘风破浪:LeetCode真题_014_Longest Common Prefix

    乘风破浪:LeetCode真题_014_Longest Common Prefix 一.前言 如何输出最长的共同前缀呢,在给定的字符串中,我们可以通过笨办法去遍历,直到其中某一个字符不相等了,这样就得 ...

  8. Asp.Net MVC Identity 2.2.1 使用技巧(六)

    使用用户管理器之角色管理 一.建立模型,这里我们其实在之前的技巧(五)已经建好了. 二.建立控制器RolesAdminController 1.在controllers文件夹上点右键>添加> ...

  9. PHPWAMP自启异常,服务器重启后Apache等服务不会自动重启的原因分析

    在使用“PHPWAMP自动任务”时,不少学生遇到如下问题: “phpwamp绿色集成环境重启动电脑(服务器)后,不会自动启动网站服务” (如果是其他环境或是自己搭建时遇到此问题,也是可以用此法解决) ...

  10. ZT 分智网博客 – 职场、面试技巧、职业规划

    http://blog.fenzhi.com/archives/5148.html 分智网博客 – 职场.面试技巧.职业规划 软件工程师职位薪酬最高的25家中国公司 作者: 分智网 日期: 2013 ...