Vue项目部署到服务器经过公网IP访问

1、vue项目打包

1.打包项目及修改文件

在本地的项目完成后，可能须要将其部署到服务器上，而且经过公网IP就能够访问到这个项目，下面介绍一下具体的部署流程。html

首先将写好的vue项目打包，在vue项目的当前目录下面运行npm run build，运行完成后，就能够发现项目中多了一个dist的文件夹，这是打包好的文件，能够用来直接运行。文件夹项目包含一个static和index.html文件，static文件下包含的是全部的源代码和数据，index.html是能够直接在本地运行的网页文件。vue

在运行前先要改几个地方，才可以成功运行出来。在没有打包以前先打开config文件夹下面的index.js文件，修改以下图所示的dev和build对象中的assetsPublicPath属性，原本是’/’，如今改成’./’。完成后保存再进行打包操做（npm run build）。

打包完成后打开dist文件夹下面的index.html文件，把代码的路径改成和下图红色框中同样的路径。原本是’/’，如今改成’./’，一共四个地方，改好以后保存。而后运行这个HTML文件就能够在本地浏览器中看到主叫的项目了，若是可以成功运行，说明打包成功。node

2.加载背景图片

若是项目中有背景图片的话，若是按照上述操做，就不会显示出来。那么如何把背景图片也加载出来呢。打开build文件下面的utils.js文件，在如图所示的代码位置添加 publicPath: ‘…/…/’,这一行代码，就能够解决背景图片加载不出来的问题。shell

2、服务器配置环境

上面vue项目配置完成后，先不用着急，把服务器上面的环境配置好才能运行。我用的服务器是阿里云Ubuntu服务器，远程链接工具为xshell。npm

xshell怎么链接服务器就不具体讲了，须要的自行百度。链接到服务器后，接下来按照下面的几个步骤进行操做。vim

1.安装node环境，由于vue项目依赖于node，因此的先把这个安装好。在xshell中输入浏览器

apt install npm

安装完成后输入npm -v来检查是否安装成功，若是命令行打印npm的版本号，说明安装成功。npm是国外的，下载速度很慢，因此换成cnpm，下载东西快一点。运行命令服务器

npm i -g cnpm

这个下载速度可能很慢，须要等待一会时间，不要没有安装完就直接取消了。若是报错没有安装成功，再安装一次试试。安装完成后能够输入命令 cnpm -v 来查看是否安装成功。编辑器

安装完node后能够在命令行输入node，测试服务器是否安装好node.js环境。若是出现一个箭头，就表明安装完成。退出的话直接运行两次Ctrl+c。工具

2.安装完成后，就须要把打包好的文件传到服务器上面去。查看我以前的教程《阿里云服务器初始配置》，在第三步中（登陆链接到服务器），按照这一步操做给服务器安装lrzsz，来进行命令式的文件传送。或者经过xshell的xftfp来进行文件传送。选择vue项目中的dist文件夹，传送到服务器的根目录下面。若是不能选择文件夹，把dist文件夹压缩一下，而后服务器用压缩命令解压就能够了。

3.vue项目中通常都是8080端口，阿里云服务器默认不开放这个端口，仍是看《阿里云服务器初始配置》，在第二步中如何开发端口。开放完8080端口后，在xshell中运行命令cnpm i -g serve安装serve模块，而后进入到刚刚的dist文件夹下面，运行命令serve -l 8080，就成功将vue项目部署到服务器上面了。

4.在浏览器中输入‘公网IP地址:端口(8080)’,就能够访问本身的项目了。注意不是xshell打印的地址，上面打印的地址为服务器的私网IP地址。

3、释放终端

上面vue项目开启服务后会一直占用服务器的终端，若是想进行其余操做或者关闭xshell后，当前这个端口就会被关闭。若是想项目一直在服务器上面挂着，而且关闭xshell后或者估计后均可以访问到这个项目，那么进行以下的操做就能够解决这个问题。

1.首先在命令行中cnpm i pm2 -g 来安装 PM2，而后确保服务器已经安装了vim和touch,通常都会有，不须要安装。在dist文件夹项目新建一个serve.sh文件，运行命令

touch serve.sh

而后ls查看文件是否建立成功，建立成功后用vim打开，运行命令

vim serve.sh

打开后在文件中写入

serve -l 8080

在vim中的操做，i是插入，esc键是切换模式，:wq是保存而且退出，:q是退出。

保存后退出vim编辑器。

2.开启服务，运行命令。online表明在运行

pm2 start serve.sh

3.若是想把这个服务停掉，运行命令

pm2 stop serve.sh