nginx部署vue https

### 如何在Nginx服务器上部署Vue应用程序并设置HTTPS

#### 一、打包Vue项目
为了使Vue应用能够在Nginx服务器上顺利运行，需先将其构建为生产环境版本。这一步骤通常涉及清理开发依赖项并将资源优化以便于分发。

npm run build

此命令会在项目的根目录下创建一个`dist`文件夹，其中包含了用于发布的静态资产[^2]。

#### 二、安装与配置Nginx
确保Linux系统已更新至最新状态，并完成Nginx的安装：

sudo apt update && sudo apt install nginx -y

对于某些发行版可能需要使用`yum`或其他包管理工具来代替上述命令中的`apt`部分[^4]。

一旦Nginx被正确安装，在大多数情况下它会自动启动；如果未发生这种情况，则可以利用如下指令手动激活该服务：

sudo systemctl start nginx

确认Nginx处于活动状态的方法之一就是尝试打开浏览器并通过IP地址或域名访问默认欢迎页面。

#### 三、调整Nginx配置支持Vue单页应用(SPA)
为了让Nginx适配Vue SPA的行为模式——即所有的路由都指向同一个HTML入口文档而不会返回404错误——有必要修改其配置文件(`nginx.conf`)内的站点定义区块(server block)，具体操作如下所示：

server {
    listen       80;
    server_name  yourdomain.com;

    location / {
        root   /path/to/your/dist/folder;
        try_files $uri $uri/ /index.html;
    }
}

这里的关键在于设置了`try_files`指令，使得任何未知路径都会重定向回首页，从而允许前端路由器接管导航逻辑[^3]。

#### 四、启用SSL/TLS加密通信(HTTPS)
要实现安全连接，首先得获取有效的SSL证书。Let's Encrypt是一个免费且广受认可的选择，提供了自动化脚本Certbot帮助简化这一过程。以下是基本流程概述：

1. 安装Certbot及其对应的Nginx插件；
2. 使用Certbot申请并安装证书；
3. 更新之前的HTTP-only `server`块以监听443端口，并加入必要的SSL参数：

server {
    listen       443 ssl http2;
    server_name  yourdomain.com;

    ssl_certificate     /etc/letsencrypt/live/yourdomain/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/yourdomain/privkey.pem;

    include snippets/ssl-params.conf;

    location / {
        root   /path/to/your/dist/folder;
        try_files $uri $uri/ /index.html;
    }
}

# Redirect all HTTP requests to HTTPS with this additional server block.
server {
    listen      80;
    server_name yourdomain.com;
    return 301 https://$host$request_uri;
}

这段配置不仅启用了HTTPS协议，还强制所有来自HTTP的流量都被永久重定向到相应的HTTPS URL上去[^1]。