vue3项目如何通过Nginx部署至服务器
作者: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 即可访问
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。