Vue项目布置到华为云（包含mqtt通信 emqx在云服务器上的设置）

最新推荐文章于 2025-03-08 18:54:23 发布

原创最新推荐文章于 2025-03-08 18:54:23 发布 · 1.1k 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#华为云

在做项目的过程中需要把Vue前端项目布置到华为云服务器上，让用户都可以通过一个公网地址去访问我们的项目，同时需要完成原来的mqtt通信传输数据，做到实时更新网页，还可以利用emqx控制台达到后台的数据传输与接收的可视化全步骤。

本博客不包括如何购买、配置华为云服务器，此类文章比较多可以自行查阅，本博客的前提是已经购买配置好华为云服务器。

本博客中使用的华为云服务器是linux操作系统。

1、打包本地的Vue项目

我们知道，基于Vue框架的网页项目与普通html、js、css组成的网页项目在启动时就有所不同，普通的网页项目直接点击生成的html文件就可以启动，Vue框架写成的项目要在本地run dev才可以启动，所以把Vue项目布置到云服务器上也与普通的项目不同，需要先在本地的项目的终端上打包我们的项目，即运行

npm run build

运行过后，原本Vue项目的目录下会多一个名为dist的文件夹，这个文件就是我们后面要上传的云服务器的文件

2、在云服务器上创建www文件夹

这一步我看是在服务器上上传文件都需要做的一步，比如上传的是普通网页，也是把html等类型的文件最终都上传到我们所创建的www文件夹下。

远程登陆我们的服务器

这一步有两个选择，一是通过华为云提供的cloudshell登录我们购买的服务器，这一步就是在我们购买的弹性云服务器上点击远程登陆后输入我们自己设置的密码即可。

第二个选择就是使用自己熟悉的服务器操作软件比如Xshell等，同样输入自己的公网ip 用户名以及密码实现远程登陆。

本博客示例直接用华为云提供的远程登陆操作。

创建www文件夹

这一步直接在远程登陆的服务器终端执行

mkdir /www

此时我们就可以看到在左侧的根目录下多了一个www空文件夹

这个文件夹就是用来放置我们的项目的文件夹。

3、安装nginx

这一步是为了在服务器中配置代理服务器，具体原理可以查看nginx相关文章

在服务器终端运行以下代码，实现对nginx的下载

sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm

再运行以下代码，实现对nginx的安装

sudo yum install -y nginx

再运行以下代码，实现启动nginx以及配置好开机自启动

sudo systemctl start nginx.service
sudo systemctl enable nginx.service

之后我们可以在浏览器中输入我们的这个服务器的弹性公网地址，来检验nginx是否安装成功，成功的话浏览器的页面会出现安装成功的提示，接下来要做的就是上传我们的项目以及更改nginx中的一些配置了。

4、上传dist文件

目前我还没有尝试直接使用cloudshell来上传文件，我是借助Xftp这个上传软件来进行上传的，打开Xtfp软件新建会话，输入服务器ip地址即弹性公网的地址以及密码之后就会成功登录

右边即我们的服务器上所有的文件，左边为我们的电脑上的文件，此时点开右边服务器文件到www文件夹下，在左边找到我们的项目的dist文件夹，把dist文件夹拖到www文件夹下等待上传成功即可，成功后我们的服务器上会有dist文件夹存放在www文件夹下。

此时我们的项目即上传成功，后续我们对项目进行一些修改或者上传全新的项目都是同这一步操作相同，直接使用Xftp软件进行上传或者删除即可。

5、更改nginx配置

这一步是为了再次输入我们弹性公网ip以后展示出来的是我们的项目，而不是原来提示nginx安装成功的页面，网上提供的方法是在终端输入vim /ect/nginx/nginx.conf，我这边建议直接找到这个文件进行修改，nginx一般都被下载在根目录的etc文件夹下（包括后续我们下载emqx等别的软件基本也都是下载在etc文件夹下），我们在根目录下展开etc文件夹，找到nginx文件夹展开，会找到一个nginx.conf的文件如下：

双击打开后，找到server{}这一配置

这里已经是我更改好的配置，我更改的位置主要有两点，一是servername原来后面没有，我加上了localhost；二是原来默认的文件打开后server中location文件没有配置，按照我的配置好，location/{}中的root后跟的就是我们的项目所在位置，即我们dist文件存放路径，如果你的dist文件名称或者存放路径不同直接更改在这里。

这一步完成之后我们再去浏览器中输入云服务器的ip地址，就可以看到我们的项目了，不过此时的项目是静态的，还没有安装emqx实现数据实时传输。