vue3 typescript vite 服务器地址配置文件 服务器运行vue项目

0- 介绍：

使用的服务器：腾讯云
使用的系统：centos7.6（centos8坑太多）
使用的用户：root

1- 先将vue项目打包

在项目中执行打包命令，执行完成后文件夹中会出现一个 dist 文件夹

npm run build

2- 在Windows上安装nginx

注意是windows版本的，目的在于测试打包的项目是否能够正常显示

（1）将下载的包解压后，进入该文件夹，输入cmd打开命令窗口

（2）将 刚刚打包的dist文件夹中的文件复制到 html 文件夹中。（注：需要先将html文件夹中的文件删除掉）

（3）测试  3.0 使用命令启动服务

  3.1 如果你的 80端口 没被占用的话，直接在浏览器地址栏输入 localhost，正常输出网页跳到第三步即可

  3.2 如果你的 80端口 被占用的话，会显示404

  3.3 此时需要将配置文件修改下地址

  3.4 在浏览器地址栏输入 localhost:880进行测试，成功即可部署到线上

  3.5 将 nginx服务 关闭，附上其它命令

3- 将dist文件夹上传到 gitee码云上

4- 在服务器中下载文件

（1）使用putty连接服务器

（2）安装git包管理工具

yum -y install git

（3）下载刚刚上传到码云上的dist文件夹

# 下载文件夹（将后面的地址换成你的）
 cd ~
 git clone https://gitee.com/ma_zipeng/vue-project.git
 # 查看是否下载成功
 ls

5- 安装nginx

（1）将整个文件夹移动到 nginx 的包下面去（你如果参考了我的文章文件夹位置应该跟我一样，如果你自己安装了，修改成你存放的位置）

cd ~
mv vue-project /mine/nginx
cd /mine/nginx
ls

（2）进入配置文件进行配置，输入:wq保存退出

vi /mine/nginx/conf/nginx.conf
# 将下面代码粘贴到配置文件中
#---------------------
       server {
               listen     4545;   # 监听端口（你可以修改成你的）
               server_name localhost;   #监听地址
               location / {
                       root vue-project;  #根目录
                       # index vv.txt;  #设置默认页
                       #proxy_pass  http://mysvr;  #请求转向mysvr 定义的服务器列
表
                       #deny 127.0.0.1;  #拒绝的ip
                       #allow 172.18.5.54; #允许的ip
               }
       }
#---------------------

（3）配置完成后，输入命令重启nginx服务

cd /mine/nginx/sbin
./nginx -s reload
# 查看是否启动
ps -ef | grep nginx

6- 配置服务器防火墙

添加 4545端口（刚刚配置的端口号即可）

输入地址测试：ip地址+端口号

7- 完结撒花