vue项目打包到腾讯云服务器全过程

本文将记录vue项目打包放到服务器的整个过程,本文中的例子是express+vue,希望能给遇到这方面问题的同学一个解决办法。

登录服务器

假定已经拥有一个服务器账号,然后下载一个xftp5用来作文件传输,下载一个xshell用来登陆服务器。如下图所示,只需要填写主机号即可(就是买的服务器的外网IP)


打包代码

在服务器文件中进入home文件夹,然后创建一个项目文件,例如vuePro
vue项目npm run build后,项目根目录下面有一个dist文件夹,然后将dist文件夹放入server文件夹中,最后将server文件夹传输到/home/vuePro中,下图就是最终项目源代码存放的位置(代码均未压缩)

安装环境

  • 安装node
    1.先进入/usr/src文件夹,这个文件夹通常用来存放软件源代码
    cd /usr/src

    2.从Node.js的站点中获取压缩档源代码,我选择的版本是v8.1.0
    wget http://nodejs.org/dist/v8.1.0/node-v8.1.0.tar.gz

    3.解压缩源文件,并且进入到压缩后的文件夹中:
    tar zxf node-v8.1.0.tar.gz
    cd node-v8.1.0

    4.执行配置脚本来进行编译预处理:
    ./configure

    5.开始编译源代码
    make

    6.当编译完成后,我们需要使之在系统范围内可用, 编译后的二进制文件将被放置到系统路径,默认情况下,Node二进制文件应该放在/user/local/bin/node文件夹下:
    make install

    7.最后安装一下Express,npm install -g express

    在make的过程中可能会出现组件缺失的情况。结合一下两个回答,安装一下对应的组件,可以解决问题。

    https://zhidao.baidu.com/question/467572486.html

    http://www.laozuo.org/9596.html

    启动nginx:
    1.进入sbin目录执行:/usr/local/nginx/sbin/nginx -t -c /usr/local/nginx/conf/nginx.conf
    2.执行:./nginx -s reload

    更改配置文件后./nginx -t

    查看nginx服务
    netstat -anpt | grep nginx

    Nginx停止
    停止有三种方式:从容停止、快速停止、强制停止
    查看进程号: ps -ef|grep nginx
    从容停止:kill -QUIT 主进程号 eg: kill -QUIT 2313
    快速停止:kill -TERM 主进程号
    强制停止:pkill -9 nginx

修改配置文件

开发模式下由于设置了proxyTable,所以能够请求到3030端口的接口。但是打包后是请求不到的,所以需要ngnix来做请求转发。

在/usr/local/nginx/conf目录下,将nginx.conf传输到桌面,用编辑器打开

在server中添加以下代码即可


upstream mysvr{
    server 127.0.0.1:3030 ; # data server 数据服务器内网端口
};

location /api/ {
    proxy_pass http://mysvr;
}
        

如果你的接口来自多个服务器端口,可以在mysvr中继续添加。(location后面加了个/api是因为项目中的接口访问都是/api/..这种形式,如果没有可以省略)
然后再将项目文件指定到根目录下面(改变原来的location即可)


location / {
    root   /home/vuePro/server/dist;
    index  index.html index.htm;
}
        

修改完之后,将文件传回服务器,在xshell中进入sbin目录执行./nginx -t来让配置生效。再执行./nginx -s reload来重启服务器。在浏览器中输入ip即可看到项目运行结果。

以上就是将项目打包放到服务器上的整个操作过程,如果遇到问题,欢迎留言。

转载于:https://www.cnblogs.com/colagao/p/8886558.html

你可能感兴趣的:(javascript,运维,前端)