vue实现https

Vue 中实现 HTTPS 的步骤

在 Vue 项目中实现 HTTPS 主要涉及开发环境配置和生产环境部署。以下是具体方法：

开发环境配置（Vue CLI 或 Vite）

使用 mkcert 生成本地 HTTPS 证书：

mkcert -install
mkcert localhost

Vue CLI 配置（vue.config.js）：

module.exports = {
  devServer: {
    https: {
      key: fs.readFileSync('localhost-key.pem'),
      cert: fs.readFileSync('localhost.pem')
    }
  }
}

Vite 配置（vite.config.js）：

import { defineConfig } from 'vite'
import basicSsl from '@vitejs/plugin-basic-ssl'

export default defineConfig({
  plugins: [basicSsl()]
})

生产环境部署

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/dist;
        try_files $uri $uri/ /index.html;
    }
}

云服务自动证书

使用 Let's Encrypt 的 Certbot：

sudo certbot --nginx -d yourdomain.com

代码中强制 HTTPS

在 main.js 添加：

if (location.protocol !== 'https:' && !location.hostname.includes('localhost')) {
  location.replace(`https:${location.href.substring(location.protocol.length)}`)
}

注意事项

• 开发环境建议使用自签名证书配合 mkcert
• 生产环境必须使用 CA 签发的有效证书
• 混合内容问题需确保所有资源使用 HTTPS 链接
• CSP 头部需要正确配置以支持 HTTPS

常见问题解决

证书信任问题

Chrome 解决自签名证书警告：

chrome://flags/#allow-insecure-localhost

WebSocket 安全连接

配置 WSS 替代 WS：

const socket = new WebSocket('wss://yourdomain.com')

HTTP/2 启用

Nginx 启用 HTTP/2：

listen 443 ssl http2;