Vue项目部署到服务器(Centos7)

￡神魔★判官ぃ 2024-03-24 18:07 52阅读 0赞

**1. 首先服务器中安装niginx: \[CentOS7系统安装nginx和配置环境变量\]**  
**2. Vue项目打包程dist：**  
在vue项目的终端使用命令：npm run build 生成dist文件  
![在这里插入图片描述][f5858ea90f594f9bb818d3e36d0302d3.png]  
将dist文件夹上传到服务器(上传的方式很多，自行百度)，存放路径自己定  
这里是存放在：/usr/local/vue  
![在这里插入图片描述][f4ae22b4d7d24ea6a017a37caef0b1c2.png]  
**3. 设置网站的存放路径**  
在服务器设置nginx的访问路径：

1.  进入到nginx安装路径的conf文件夹下：cd /usr/local/nginx/conf
2.  编辑nginx.conf文件：vi nginx.conf  
    将root的默认路径修改为自己dist上传的路径如下图：  
    ![在这里插入图片描述][22f5803fd24947de80edbe4ca5a2d082.png]  
    重启nginx  
    ![在这里插入图片描述][68ad744e067d4665a97e1080852f5fe9.png]  
    **到浏览器输入自己的服务器地址和设置的端口号就能成功访问到自己写的vue项目啦**  
    ![在这里插入图片描述][c8e4edd6613e4ef69a920b090a8a5fb5.png]

[f5858ea90f594f9bb818d3e36d0302d3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/7e0d10b38c0f45cdb89c669e6e52edb7.png
[f4ae22b4d7d24ea6a017a37caef0b1c2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/9d2f5c42956a4d308bdaf80456707e5a.png
[22f5803fd24947de80edbe4ca5a2d082.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/359090f552b14027be242c1dd23f411a.png
[68ad744e067d4665a97e1080852f5fe9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/5b423f2e52dc43b0a478e7c91fccdd2c.png
[c8e4edd6613e4ef69a920b090a8a5fb5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/cbebb2b3e08741ad982ff56892abdcb5.png