vue3项目如何通过Nginx部署至服务器
更新时间：2025年06月04日 16:49:02 作者：Gbbnb
这篇文章主要介绍了vue3项目通过Nginx部署至服务器的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue3通过Nginx部署至服务器
1.修改vue项目中的vue.config.js文件
defineConfig 添加配置用于确保部署后的路径能够正确访问（只需添加 base: ‘/’，其他不需要修改 ）
export default defineConfig({
base: '/'
});2.构建项目静态文件
在本地开发环境中，构建 Vue 3 项目以生成生产环境的静态文件。（该指令会生成包含各项配置的dist文件夹）
npm run build
3.上传配置文件至云服务器
将dist文件夹上传至云服务器
scp -r dist 服务器用户名@服务器IP地址:文件路径
4.安装Nginx
在云服务器上安装Nginx
sudo apt update sudo apt install nginx
5.安装nodejs
sudo apt-get install -y nodejs
6.配置nginx
sudo vim /etc/nginx/sites-available/default
修改配置文件内容为：
server {
listen 80;
server_name _;
root /opt/HIS_Client/dist;
index index.html index.htm index.nginx-debian.html;
location / {
try_files $uri $uri/ /index.html;
}
error_page 404 /index.html;
}listen：想要开启的端口，默认为80server_name：访问页面需要的地址，通常为服务器IP地址root：服务器中dist文件夹地址index：如果是文件夹则优先访问目录下的index文件try_files：按顺序查找文件，都没有则访问index.htmlerror_page：错误页面
7.设置文件权限
确保nginx能够有权限访问静态文件夹目录
sudo chown -R www-data:www-data 你的dist文件夹地址 sudo chmod -R 755 你的dist文件夹地址
8.开启防火墙端口
允许防火墙通过该端口进行访问（假设访问为80端口）
sudo ufw allow 80
9.云服务器安全组开启端口允许访问
添加入方向规则，允许通过80端口进行访问
10.重新加载nginx配置文件
nginx配置完成后需重新加载
sudo nginx -c /etc/nginx/nginx.conf
11.开启Nginx服务
nginx -s reload
12.访问网址
通过http://服务器ip地址:80 即可访问
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文介绍 Vue+SpringBoot 架构下,基于国密 SM2 实现前后台数据加密传输的核心流程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2026-01-01
这篇文章主要介绍了vue中的inject用法及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家详细介绍了vue实现移动端input上传视频、音频，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
elementui el-upload一次请求上传多个文件的实现
使用ElementUI Upload的时候发现如果是默认方案,上传多张图片并不是真正的一次上传多张,本文就来介绍一下elementui el-upload一次请求上传多个文件的实现,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
这篇文章主要介绍了VUE+Canvas 实现桌面弹球消砖块小游戏,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
这篇文章主要给大家介绍了关于vue3.0关闭eslint校验的3种方法,在实际开发过程中,eslint的作用不可估量,文中将关闭的方法介绍的非常详细,需要的朋友可以参考下2023-06-06
详解vue-router 动态路由下子页面多页共活的解决方案
这篇文章主要介绍了vue-router 动态路由下子页面多页共活的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了Vue.js单向绑定和双向绑定,结合实例形式分析了vue.js单向绑定与双向绑定相关原理、实现方法及操作技巧,需要的朋友可以参考下2018-08-08
uView是uni-app生态专用的UI框架,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,这篇文章主要给大家介绍了关于uniapp使用uview的简单案例,需要的朋友可以参考下2023-03-03
这篇文章主要为大家介绍了vue项目里的权限控制，文中有详细的代码示例供大家参考，有需要的朋友可以借鉴参考下，希望能够有所帮助2023-06-06
最新评论