如何使用nginx部署vue网站 （ubuntu系统）-爱代码爱编程

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

1. 构建Vue项目：首先确保你的Vue项目已经被构建。在终端中运行 npm run build 或 yarn 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服务器进行访问了。