Vue.js项目部署到服务器的详细步骤

前言

  最近做完了一个项目,Vue.js 2.0 + vuex + axios,还是有点大的。想着做了这么久,放服务器给朋友们体验一下,帮忙找找BUG,于是就有了研究服务器这一篇文章了。

准备工作

服务器

既然是部署到服务器,肯定是需要一个云的。我这里找基友拿的一个,做测试的话,可以买阿里云的学生机,9.9 一个月,不过不是学生的话就比较麻烦,因为涉及敏感操作都需要验证码。

编译打包

将项目打包成 dist 文件,这里我需要跨域请求一些数据,还写了一个小型服务器, app.js 放到 dist 文件夹 同级目录。

Xshell

因为基友的是 centos 的服务器,所以用 xshell 的话稍微好操作一点,我是 win10。

WinSCP

接触命令行并不多,所以面对命令行编程我还是有点效率不高。这个软件就方便了文件的上传,编辑等等,图形化界面。

正式开始

有了上面几项之后,可以正式开始部署工作了。

登录 WinSCP,连接远程服务器

打开 WinSCP,会出现如下界面

主机名,输入你的服务器公网 ip,端口号不变,用户名一般是 root,密码则是你购买服务器时设置的密码,点击登录。

默认是 /root 界面。

这时候把你打包好的文件,扔到某一个目录下,如 /opt,dist 和 app.js 在同一目录

登录 Xshell 连接远程服务器

打开 Xshell,第一次登录会有如下界面:

名称可以随便取一个,协议选择 SSH,主机就是你的公网 ip,

之后会有这个页面

这里我是创建好了的,点击就可以直接连接。如果你是从上一步过来的,点击之后会要输入密码

之后就连接到远程 Linux 系统了。

安装 node.js

由于我的项目是需要跨域请求数据,所以这里我选择的是用 Node.js 启动小型服务器,请求数据。

  1. 下载源码
  2. 解压源码
  3. 编译安装

下载源码,这里以最新的 6.11.1 为例:

cd /usr/local/src/
wget http://nodejs.org/dist/v6.11.1/node-v6.11.1.tar.gz

解压源码:

cd /usr/local/src/
tar zxvf node-v6.11.1.tar.gz

编译安装:

cd node-v6.11.1
./configure --prefix=/usr/local/node/6.11.1
make
make install

这里 make 过程大约30分钟,可以去做别的。

ps:这里我遇到服务器没有安装 g++ 的问题,那直接

yum install gcc-c++

就可以了。

安装完成后,还需要对 node 进行环境变量的配置

这里通过 WinSCP 找到 /etc/profile,右键该文件,编辑。

在 export PATH USER LOGNAME MAIL HOSTNAME HISTSIZE HISTCONTROL 上面一行添加如下代码:

#set for nodejs
export NODE_HOME=/usr/local/node/6.11.1
export PATH=$NODE_HOME/bin:$PATH

ctrl + s 保存退出,然后编译一下

source /etc/profile

然后 node -v 检验是否安装成功

之后再安装守护进程,并设置开机自启。保证我们自己写的小型服务器能脱离 Xshell 在服务器上运行

全局安装:

npm install pm2 -g

进入 /opt (这里是你放 dist 的和 app.js 的目录),执行命令:

pm2 start app.js --watch
pm2 save
pm2 startup

如果在服务器端没有防火墙墙掉端口的情况下,我们应该可以愉快的看到自己的项目了。

但是,服务器端有防火墙墙掉了端口怎么办。

vps,安装 iptables:

yum install -y iptables-service

粗暴的关闭防火墙(不推荐):

systemctl stop firewalld.service
systemctl disable firewalld.service
yum install -y iptables-service // 如果上面安装过了就不用了
iptables -F
iptables -X
iptables -Z
iptables-save
systemctl restart iptables.service

单独开启某一个端口(推荐):

查看状态:

iptables -L -n

下面添加对特定端口开放的方法:

使用iptables开放如下端口

/sbin/iptables -I INPUT -p tcp --dport 8000 -j ACCEPT

保存

/etc/rc.d/init.d/iptables save

重启服务

service iptables restart

查看需要打开的端口是否生效

/etc/init.d/iptables status

方法2:

或直接编辑/etc/sysconfig/iptables

-A INPUT -p tcp -m tcp --dport 4000 -j ACCEPT

保存在前面部分

再重启:

service iptables restart

如果是阿里云,就在安全组规则里添加相应的规则即可。

总结

以上所述是小编给大家介绍的Vue.js项目部署到服务器的详细步骤,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2017-07-16

vue.js国际化 vue-i18n插件的使用详解

安装方法 1.使用CDN直接引用 <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script> 2.NPM $ npm install vue-i18n 3.Yarn $ yarn add vue-i18n 使用方法 在这里只介绍v

Vue.js中extend选项和delimiters选项的比较

Vue.js中extend选项和delimiters选项的比较 extend选项 允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数),而无需使用Vue.extend,这主要是为了便于扩展单文件组件,它和mixin有类似之处 <div id="app"> {{num}} <button @click="add">addNumber</button> </div> <script type="te

vue.js组件之间传递数据的方法

前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A 在它的模板中使用了组件 B,那么组件 A 就是父组件,组件 B 就是子组件. // 注册一个子组件 Vue.component('child', { data: function(){ text: '我是fathe

Vue.js结合Ueditor富文本编辑器的实例代码

在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器. 前一段时间公司Vue.js项目需要使用UEditor富文本编辑器,在百度上搜索一圈没有发现详细的说明,决定自己尝试,忙活了一天终于搞定了. 1. 总体思路 1.1 模块化 vue的很大的一个优势在于模块化,我们可以通过模块化实现页面和逻辑的复用.所以可以把Ueditor重新封装成一个.vue的模板文件.其他组件通过引入这个模板实现代码复用. 1.2 数据传输 首先父组件需要设置编辑器的长度.宽度.初始文本,这些数据可以通过prop

Vue.js 单页面多路由区域操作的实例详解

单页面多路由区域操作 在一个页面中有两个及以上的<router-view>区域,需要通过设置路由的index.js,来操作这些区域的内容 App.vue 中设置: <router-view></router-view> <router-view name="left" style="float: left;width: 50%; height: 300px;background-color: #ccc;"></r

详解vue.js+UEditor集成 [前后端分离项目]

首先,谈下这篇文章中的前后端所涉及到的技术框架内容. 虽然是后端的管理项目,但整体项目,是采用前后端分离的方式完成,这样做的目的也是产品化的需求: 前端,vue+vuex+vue router+webpack+elementUI的方案完成框架的搭建,其中用到了superUI来作为后端登陆之后的主页面框架,中间集成vue的大型单页应用: 后端,springboot+spring+springmvc+spring serurity+mybatis+maven+redis+dubbo +zookeep

详解Vue微信授权登录前后端分离较为优雅的解决方案

微信授权登录是一个非常常见的场景,利用微信授权登录,我们可以很容易获取用户的一些信息,通过用户对公众号的唯一openid从而建立数据库绑定用户身份. 微信授权登录的机制这里不做详述,微信官方文档已有详述,简述就是通过跳转微信授权的页面,用户点击确认后,微信会跳到回调页面,此时回调页面url上会携带code参数,通过code参数,后端可以拿code换取拥护openid,或者用户信息 在vue项目中,通常是一个SPA应用,即所有的页面都是同一个html,通常现在开发也是前后端彻底分离的,vue打包后

详解 vue.js用法和特性

前  言 最近用Vue.js做了一个数据查询平台,还做了一个拼图游戏,突然深深的感到了vue的强大. Vue.js是一套构建用户界面(user interface)的渐进式框架.与其他重量级框架不同的是,Vue 从根本上采用最小成本.渐进增量(incrementally adoptable)的设计.Vue 的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供有力驱动. Vue.j

Django+Vue.js搭建前后端分离项目的示例

在写这篇文章的时候,顺带学习了一下关于Markdown的使用方法. 笔者是个渣渣,一切都是自己在摸索的学着,所以也谈不上什么体系.系统学习.在这里主要是为了实现把项目前后端分离开. 这里假设你的电脑上所需的django.vue.js已经有了,如果没有,往下拉就是vue.js的安装流程.django前面写过了,就不赘述了. 一,正常搭建前后端分离项目流程 1.创建django项目 命令: django-admin startproject ulb_manager 结构: ├── manage.py

详解Vue.js 响应接口

Vue 可以添加数据动态响应接口. 例如以下实例,我们通过使用 $watch 属性来实现数据的监听,$watch 必须添加在 Vue 实例之外才能实现正确的响应. 实例中通过点击按钮计数器会加 1.setTimeout 设置 10 秒后计算器的值加上 20 . <div id = "app"> <p style = "font-size:25px;">计数器: {{ counter }}</p> <button @click

详解Vue.js中.native修饰符

修饰符(Modifiers)是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定.这篇文章给大家介绍Vue.js中.native修饰符,感兴趣的朋友一起看看吧. .native修饰符 官方对.native修饰符的解释为: 有时候,你可能想在某个组件的根元素上监听一个原生事件.可以使用 v-on 的修饰符 .native .例如: <my-component v-on:click.native="doTheThing"></my-component>

详解Flask前后端分离项目案例

简介 学习慕课课程,Flask前后端分离API后台接口的实现demo,前端可以接入小程序,暂时已经完成后台API基础架构,使用 postman 调试.git 重构部分: ken校验模块 auths认证模块 scope权限模块,增加全局扫描器(参考flask HTTPExceptions模块) 收获 我们可以接受定义时的复杂,但不能接受调用时的复杂 如果你觉得写代码厌倦,无聊,那你只是停留在功能的实现上,功能的实现很简单,你要追求的是更好的写法,抽象的艺术,不是机械的劳动而是要 创造 ,要有自己的

部署vue+Springboot前后端分离项目的步骤实现

单页应用 vue经常被用来开发单页应用(SinglePage Web Application,SPA),什么叫做单页应用呢,也就是只有一张web页面的应用,单页应用的跳转只需要刷新局部资源,大大加快的了我们页面的响应速度 前端页面打包 打开vue工程,在项目根目录下创建一个配置文件:vue.config.js,然后在里面写入以下内容: module.exports = { assetsDir: 'static', // 静态资源保存路径 outputDir: 'dist', // 打包后生成的文

Nginx代理同域名前后端分离项目的完整步骤

前后端分离项目,前后端共用一个域名.通过域名后的 url 前缀来区别前后端项目. 以 vue + php 项目为例.直接上 server 模块的 nginx 配置. server { listen 80; #listen [::]:80 default_server ipv6only=on; server_name demo.com; # 配置项目域名 index index.html index.htm index.php; # 1.转给前端处理 location / { # 前端打包后的静态

thinkphp5框架前后端分离项目实现分页功能的方法分析

本文实例讲述了thinkphp5框架前后端分离项目实现分页功能的方法.分享给大家供大家参考,具体如下: 方法一 利用tp5提供的paginate方法实现自动分页 参数 page第几页,paginate分页方法会自动获取 size  每页数量 代码 /** * Notes:消费记录 * Date: 2019/6/25 * Time: 15:43 * @param Request $request * @return \think\response\Json */ public function g