vue实现https

Vue 中实现 HTTPS 的配置方法

在 Vue 项目中启用 HTTPS 通常涉及开发环境配置和生产环境部署两个场景。以下是具体实现方式：

开发环境配置（Vue CLI）

使用 vue-cli-service 启动本地开发服务器时，可通过以下方式启用 HTTPS：

1. 自动生成证书（推荐） 修改 vue.config.js 文件：

   module.exports = {
     devServer: {
       https: true
     }
   }

   Vue CLI 会使用内置的 self-signed 证书，浏览器首次访问时会提示不安全，需手动信任。

2. 自定义证书 准备 PEM 格式的证书文件后配置：

   

   const fs = require('fs')
   module.exports = {
     devServer: {
       https: {
         key: fs.readFileSync('/path/to/server.key'),
         cert: fs.readFileSync('/path/to/server.crt')
       }
     }
   }

生产环境部署

生产环境的 HTTPS 需要在 Web 服务器（如 Nginx、Apache）或云服务（如 AWS、Azure）配置：

1. Nginx 服务器配置示例

   server {
     listen 443 ssl;
     server_name yourdomain.com;
   
     ssl_certificate /path/to/cert.pem;
     ssl_certificate_key /path/to/key.pem;
   
     location / {
       root /path/to/vue/dist;
       try_files $uri $uri/ /index.html;
     }
   }

2. CDN/云服务配置

   

   • AWS CloudFront：在分配设置中上传 ACM 证书
   • Azure App Service：通过 TLS/SSL 绑定上传 PFX 证书
   • Let's Encrypt：使用 Certbot 自动续签免费证书

前端代码适配

1. API 请求基地址 确保所有 API 请求使用 HTTPS 协议：

   axios.defaults.baseURL = 'https://api.yourdomain.com'

2. 混合内容警告处理 检查页面中是否包含 http:// 的资源链接（如图片、脚本），替换为 https:// 或协议相对路径 //

证书获取方式

1. 权威机构签发

   • 付费证书：DigiCert、GeoTrust 等
   • 免费证书：Let's Encrypt（90 天有效期）

2. 自签名证书（仅测试用）

   openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365

注意事项

• 开发环境自签名证书会导致浏览器安全警告，需手动添加例外
• 生产环境证书需注意有效期，建议设置自动续期
• 启用 HTTP/2 需同时配置 HTTPS
• 使用 vue-router 的 history 模式时，确保服务器正确配置重定向规则