VUE3搭载到服务器

1.搭建服务器

本次使用 Windows11 + nginx + cpolar + flask 搭建服务器。
nginx 是服务器搭建工具。cpolar 是内网穿透工具。flask 是用于编写应用程序。

1.1 安装nginx

这一步请参考此博客：nginx运行vue项目的dist文件

关键点：
nginx下载地址：http://nginx.org/en/download.html

nginx常用命令：
启动 nginx 服务：start nginx
关闭 nginx 服务：nginx -s quit
重载 nginx 服务：nginx -s reload
检查端口是否占用：netstat -ano | findstr 0.0.0.0:80 或netstat -ano | findstr "80"

1.2 安装内网穿透工具 coplar

步骤如下查看此博客 cpolar 章节：https://blog.csdn.net/qq_62464995/article/details/130140673

注：
建议客户端启动，客户端启动可以一直查看到网址
cpolar客户端启动网址： http://localhost:9200/#/dashboard
cpolar终端方式启动命令：cpolar http 8080

cpolar监听流量包流量： http://localhost:4042
cpolar官方安装使用教程： https://www.cpolar.com/blog/free-release-of-lan-web-site?channel=0&invite=4W3F

1.3 安装flask,测试服务器

测试思路是：通过公共网址向服务器发送数据，服务器若能将原数据返回，说明服务器网址搭建成功！！

上面步骤完成后，先用cpolar内网穿透8080端口，获得自己的公共网址：http://43b318cf.r24.cpolar.top。
然后，python 环境安装 flask:pip install flask。
并编写 app.py 文件监听服务器8080端口，如下代码运行：

from flask import Flask, request

app = Flask(__name__)

@app.route('/')
def get_data():
    data = request.args.get('data')
    return f'GET请求收到的数据是：{data}'

if __name__ == '__main__':
    app.run(debug=True, port=8080)
1
2
3
4
5
6
7
8
9
10
11

数据发送端编写代码：

import requests
import json

data = {'data': json.dumps([5,6,7,8,9])}

# 发送GET请求
url = 'http://43b318cf.r24.cpolar.top'
response = requests.get(url, params=data)

# 打印服务器响应的内容
print(response.text)
1
2
3
4
5
6
7
8
9
10
11

可以看到，每次发送数据，服务器能将原数据返回,说明网站搭建成功。

2.VUE3 搭载到服务器

如图，简单的 VUE 项目开发完成后。

修改vue.config.js文件夹中的内容。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  assetsDir: 'static',
  parallel: false,
  publicPath: './'
})
1
2
3
4
5
6
7

然后使用终端命令：npm run build。之后 VUE 项目生成 dist 文件，此文件里的全部内容就是前端页面文件。

然后重新配置 nginx ，配置文件还是nginx-1.24.0\conf\nginx.conf，注意，我们要做前后端分离，于是配置 前端端口 5000，后端端口 6000，配置完毕重启 nginx 。配置细节如下：

    server {
        listen       5000;  # 配置端口
        server_name  localhost;

        location / {
            root   "C:\mycode\ecgweb\webui";  # 配置前端页面文件地址
            index  index.html index.htm;  # 配置启动文件
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

    server {
        listen       6000;
        server_name  localhost;

        location / {
            proxy_pass http://127.0.0.1:6000;  # 将请求代理到不同的端口上
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

然后，使用 cpolar 将 5000 ，6000两个端口都内网穿透到公共网址。
访问 5000 端口网站公共网址。可以看到，在公共网址 VUE3 布局生效。如图所示网址以及界面。

那个 6000 的端口就用于后端数据请求，后端数据交互与上面 1.1 节例子相似。
到此前端界面，服务器搭建，后端数据全部搭建完毕！！！