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

一、vue项目打包

1.打包项目及修改文件

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

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

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

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

2.加载背景图片

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

二、服务器配置环境

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

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

​ 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项目部署到服务器上面了。

============ 2020-11-15 补充 ===============

最近想重新部署一个项目的时候，发现光从阿里云控制台打开端口还没有用，在那边打开端口可能只是开了一个外网可以访问的权限，如果服务器上面没有吧这个端口打开的话，也是没有用。可能之前阿里云就默认开了8080的端口。

现在想开放其他端口的话，还需要运行如下命令，把服务器上面的端口也打开。
以下的命令可以在centos上运行，也可以是Ubuntu

1、先查看一下防火墙已经开放了哪些端口
firewall-cmd --zone=public --list-ports

2、如果没有自己想打开的端口，就把端口开启，比如下面就是开放8099这个端口
firewall-cmd --zone=public --add-port=8099/tcp --permanent

3、使得上面配置立即生效
firewall-cmd --reload

4、如果想关闭当前这个端口
firewall-cmd --zone=public --remove-port=8099/tcp --permanent

启动： systemctl start firewalld
查看状态： systemctl status firewalld 
禁用，禁止开机启动： systemctl disable firewalld
停止运行： systemctl stop firewalld
复制代码

================================

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

三、释放终端

​ 上面vue项目开启服务后会一直占用服务器的终端，如果想进行其他操作或者关闭xshell后，当前这个端口就会被关闭。如果想项目一直在服务器上面挂着，并且关闭xshell后或者估计后都可以访问到这个项目，那么进行如下的操作就可以解决这个问题。

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

touch serve.sh
复制代码

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

vim serve.sh
复制代码

先安装serve模块，否则可能获报错，造成其实服务已经起来了，但外网一直无法访问的情况出现。如果出错了可以通过pm2 logs来查看日志，看出现了什么错误。

npm install -g serve
复制代码

​ 打开后在文件中写入

serve -l 8080
复制代码

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

​ 保存后退出vim编辑器。

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

pm2 start serve.sh
复制代码

​ 3.如果想把这个服务停掉，运行命令

pm2 stop serve.sh
复制代码

​ 至此vue项目部署到服务器上面就完成了，没有域名的就可以直接用公网IP地址:端口号的方式来访问了。