在ubuntu系统中将vue3的打包文件dist 部署nginx 并且配置ssl证书 以https方式访问
确保 Nginx 已安装
如果尚未安装 Nginx，可以通过以下命令安装：
bash
sudo apt update
sudo apt install nginx准备 Vue 3 打包文件
bash
确保你已经通过 npm run build 命令生成了 Vue 3 项目的 dist 目录。
将 dist 目录的内容上传到 Ubuntu 服务器的某个目录，例如 /var/www/vue-app。配置 Nginx
bash
创建 Nginx 配置文件
在 /etc/nginx/sites-available/ 目录下创建一个新的配置文件，例如 vue-app：
sudo nano /etc/nginx/sites-available/vue-app
编辑 Nginx 配置文件
将以下内容粘贴到配置文件中（根据你的实际路径和域名修改）：
bash
server {
listen 80;
server_name your-domain.com www.your-domain.com;
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl;
server_name your-domain.com www.your-domain.com;
ssl_certificate /etc/letsencrypt/live/your-domain.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/your-domain.com/privkey.pem;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers HIGH:!aNULL:!MD5;
root /var/www/vue-app;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}说明：
your-domain.com：替换为你的实际域名。
/var/www/vue-app：替换为你的 Vue 3 打包文件 dist 目录的实际路径。
ssl_certificate 和 ssl_certificate_key：指向你的 SSL 证书和私钥文件路径。如果使用 Let's Encrypt，路径通常为 /etc/letsencrypt/live/your-domain.com/。
启用配置文件
创建一个符号链接到 /etc/nginx/sites-enabled/ 目录以启用配置：
bash
sudo ln -s /etc/nginx/sites-available/vue-app /etc/nginx/sites-enabled/测试 Nginx 配置
在重新加载 Nginx 之前，测试配置文件是否正确：
bash
sudo nginx -t重新加载 Nginx
如果配置测试通过，重新加载 Nginx 以应用更改：
bash
sudo systemctl reload nginx配置 SSL 证书
安装 Certbot（Let's Encrypt）
如果尚未安装 Certbot，可以通过以下命令安装：
bash
sudo apt install certbot python3-certbot-nginx获取 SSL 证书
bash
sudo certbot --nginx -d your-domain.com -d www.your-domain.com按照提示完成证书申请流程。
Certbot 会自动配置 Nginx 以使用 HTTPS，并设置证书自动续期。
验证证书自动续期
测试证书是否可以自动续期：
bash
sudo certbot renew --dry-run验证部署
打开浏览器，访问 https://your-domain.com。
确保网站可以通过 HTTPS 正常访问。
检查浏览器地址栏是否显示安全锁标志。
注意事项
文件权限：
确保 Nginx 用户（通常是 www-data）对 /var/www/vue-app 目录有读取权限：
bash
sudo chown -R www-data:www-data /var/www/vue-app
sudo chmod -R 755 /var/www/vue-app防火墙：
确保防火墙允许 HTTP（80）和 HTTPS（443）端口：
bash
sudo ufw allow 'Nginx Full'日志文件：如果遇到问题，检查 Nginx 的日志文件：
bash
sudo tail -f /var/log/nginx/error.log总结：
通过以上步骤，你可以在 Ubuntu 系统中部署 Vue 3 的打包文件，并通过 Nginx 配置 SSL 证书以 HTTPS 方式访问。关键步骤包括：
安装并配置 Nginx。
部署 Vue 3 的 dist 目录。
使用 Certbot 获取并配置 SSL 证书。
测试和验证部署。
这样，你的 Vue 3 应用就可以通过 HTTPS 安全访问了。