vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3项目通过Nginx部署至服务器

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;
}

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 即可访问

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文