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即可看到项目运行结果。

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