如何使用nginx部署vue网站 (ubuntu系统)

部署Vue.js网站需要使用Nginx作为服务器来托管静态资源。以下是部署Vue网站到Nginx的步骤:

  1. 构建Vue项目:首先确保你的Vue项目已经被构建。在终端中运行 npm run buildyarn build 命令来生成生产环境的静态文件。

  2. 安装Nginx:如果你还没有安装Nginx,可以使用以下命令来安装:

    sudo apt update
    sudo apt install nginx
    
  3. 配置Nginx:打开Nginx的配置文件,在Ubuntu系统上,该文件位于 /etc/nginx/sites-available/default。可以使用以下命令来编辑该文件:

    sudo nano /etc/nginx/sites-available/default
    

    在配置文件中添加以下配置:

    server {
         listen 80;
         server_name your_domain.com; # 替换为你的域名
    
         location / {
             root /path/to/your/vue/project/dist; # 替换为Vue项目构建后dist文件夹的路径
             index index.html;
             try_files $uri $uri/ /index.html;
         }
     }
    
  4. 保存并退出配置文件,然后重新启动Nginx服务以使配置生效:

    sudo systemctl restart nginx
    
  5. 确保防火墙允许Nginx的HTTP和HTTPS流量:

    sudo ufw allow 'Nginx Full'
    
  6. 访问你的网站:现在,在浏览器中输入你的域名,应该可以看到部署在Nginx上的Vue网站了。

以上就是部署Vue网站到Nginx的基本步骤。记得根据自己的实际情况调整配置中的路径和域名,并按需修改Nginx配置文件。部署完毕后,你的Vue网站就可以通过Nginx服务器进行访问了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值