Vue(7)：vue项目部署到服务器通过公网IP访问

最新推荐文章于 2025-02-15 22:55:06 发布

少年码农历险记

最新推荐文章于 2025-02-15 22:55:06 发布

阅读量7.7k

点赞数 5

分类专栏： vue 文章标签： vue linux ubuntu 云服务器 vim

本文链接：https://blog.csdn.net/qq_42376617/article/details/106957823

版权

vue 专栏收录该内容

8 篇文章

订阅专栏

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