nginx部署前端vue项目

前提条件

• 一台已经安装了Nginx的服务器。
• 服务器上需要有SSH访问权限。
• 本地机器上已经完成Vue.js项目的开发。

步骤 1：构建Vue项目

在本地开发环境中，进入到Vue项目目录，然后执行以下命令来构建项目：

npm run build

这个命令会生成一个dist文件夹，其中包含了所有用于生产环境的静态文件。

步骤 2：上传文件到服务器

使用SSH和SCP命令将dist文件夹上传到服务器。以下是一个示例命令：

scp -r dist/ username@your_server_ip:/var/www/vue_project

请将username替换为您的服务器用户名，your_server_ip替换为服务器的IP地址，/var/www/vue_project替换为您希望在服务器上存放Vue项目文件的路径。

步骤 3：配置Nginx

登录到服务器，然后编辑Nginx的配置文件。通常配置文件位于/etc/nginx/sites-available或/etc/nginx/conf.d目录下。
创建一个新的配置文件，例如vue_project.conf：

sudo nano /etc/nginx/sites-available/vue_project.conf

添加以下内容：

server {
    listen 80;
    server_name your_domain.com; # 替换为您的域名或服务器IP
    location / {
        root /var/www/vue_project; # 替换为您的Vue项目存放路径
        try_files $uri $uri/ /index.html; # 用于Vue路由的history模式
    }
    # 可以添加更多的配置，比如错误页面、日志等
}

保存并关闭文件。

步骤 4：启用配置文件

如果配置文件在sites-available目录下，需要创建一个符号链接到sites-enabled目录：

sudo ln -s /etc/nginx/sites-available/vue_project.conf /etc/nginx/sites-enabled/

步骤 5：检查Nginx配置

在重启Nginx之前，检查配置文件是否有语法错误：

sudo nginx -t

如果输出显示syntax is ok和test is successful，则配置正确。

步骤 6：重启Nginx

如果配置检查无误，重启Nginx服务以应用新的配置：

sudo systemctl restart nginx

步骤 7：访问Vue项目

现在，您应该可以通过浏览器访问http://your_domain.com或http://your_server_ip来查看您的Vue项目了。

额外步骤：配置HTTPS（可选）

为了安全性，您可能希望配置HTTPS。这需要SSL证书。可以使用Let’s Encrypt免费获取证书。

1. 安装Certbot：

sudo apt-get install certbot python3-certbot-nginx

2. 获取证书并自动配置Nginx：

sudo certbot --nginx -d your_domain.com

替换your_domain.com为您的域名。
Certbot会自动修改Nginx配置文件，以使用SSL证书。
如果有任何问题，请确保检查Nginx的错误日志，通常位于/var/log/nginx/error.log。