当前位置 主页 > 服务器问题 > win服务器问题汇总 >

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

    栏目:win服务器问题汇总 时间:2019-10-18 08:12

    前言

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

    准备工作

    服务器

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

    编译打包

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

    Xshell

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

    WinSCP

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

    正式开始

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

    登录 WinSCP,连接远程服务器

    打开 WinSCP,会出现如下界面

    WinSCP登录界面

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

    登录成功界面

    默认是 /root 界面。

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

    登录 Xshell 连接远程服务器

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

    Xshell登录

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

    之后会有这个页面

    会话

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

    输入密码

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

    连接成功

    安装 node.js

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

    下载源码 解压源码 编译安装

    下载源码,这里以最新的 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