centos如何部署vue项目

centos如何部署vue项目

前言

最近做了一个AI应用，通过大模型可以生成图片、并合成适视频，也有一点有趣。
后端是基于fastapi的，前端是vue。
但是在部署vue的是时候，有点犯难。
职业生涯中虽然做过前端项目(Extjs、bootStrap这种)，但是之前没有部署过vue项目，所以记录一下部署过程。
今天给大家分享一下，我是如何一步一步完成vue部署的。
欢迎点赞、收藏、关注。
视频讲解


实战

整体思路：
1.将Vue项目打包成dist包
2.将dist包上传到服务器
3.安装Nginx
4.配置Nginx[nginx.conf]
5.重启Nginx
1、vue打包成dist文件

这个是前端同学帮需要打包成静态文件，生成dist文件夹。
该目录下包含：

• css文件夹
  
• fonts
  
• js
  
• index.html
  
• favicon.ico
  

2、上传到服务器

上传到服务器，这里使用的是MobaXterm工具。
上传到服务器的目录：/home/hubs/vue-demo/

   

3、安装nginx

自行查阅相关资料，这里不再赘述。
4、配置Nginx

进入/etc/nginx/conf.d/目录下，创建一个vue.conf文件。
打包后的文件需要部署到 Web 服务器（如 Nginx、Apache、Tomcat 等），端口由服务器配置决定。一般地，vue默认端口8080，如果端口被占用，需要修改，如8082。
配置如下：

1.   server {
2.         listen       8082; # 监听的端口,自定义
3.         server_name  localhost;
4.         location / {
5.             root  /home/hubs/vue-demo/dist;   #  dist路径     
6.             index  index.html index.htm;
7.             try_files $uri $uri/ /index.html;
8.         }
9.     }

复制代码

5、重启Nginx

1. nginx -s reload

复制代码

测试

在浏览器输入http://ip:8082，如果出现页面，则表示部署成功。

   

能够访问，说明大功告成!
参考

• Linux+Nginx部署Vue项目（dist文件）
  
• centos如何部署vue项目（原文）
  

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！