記錄---在Vue項目中啟用HTTPS本地開發

????? 寫在開頭

點贊 + 收藏 === 學會??????

現代前端開發中，啟用HTTPS本地環境越來越重要。本文將詳細介紹如何在Vue項目中配置HTTPS開發服務器，使用mkcert工具生成可信證書，解決跨域問題并模擬真實生產環境。

為什么需要HTTPS本地開發？

使用瀏覽器新特性（如地理位置API）
解決第三方登錄（OAuth）的localhost限制
測試Service Worker和PWA功能
避免混合內容警告（Mixed Content）
模擬真實生產環境行為

完整配置步驟

1?? 安裝mkcert證書工具

# 查看系統架構
uname -m

# 根據架構下載（示例為Apple Silicon）
curl -LO https://github.com/FiloSottile/mkcert/releases/download/v1.4.4/mkcert-v1.4.4-darwin-arm64
chmod +x mkcert-v1.4.4-darwin-arm64
sudo mv mkcert-v1.4.4-darwin-arm64 /usr/local/bin/mkcert

# 驗證安裝
mkcert --version  # 應輸出 v1.4.4

2?? 創建并安裝本地CA

# 安裝本地證書頒發機構
mkcert -install

? 系統鑰匙串將出現名為 "mkcert development CA" 的證書

3?? 生成域名證書

# 為自定義域名和本地地址生成證書
mkcert your.domain.com "*.your.domain.com" localhost 127.0.0.1 ::1

# 重命名證書文件
mv your.domain.com+4-key.pem localhost-key.pem
mv your.domain.com+4.pem localhost-cert.pem

4?? Vue項目配置

// vue.config.js
const fs = require('fs');
const path = require('path');

module.exports = {
  devServer: {
    https: {
      key: fs.readFileSync(path.resolve(__dirname, 'localhost-key.pem')),
      cert: fs.readFileSync(path.resolve(__dirname, 'localhost-cert.pem'))
    },
    port: 8443,  // 推薦HTTPS端口
    host: 'your.domain.com',
    headers: {
      'Access-Control-Allow-Origin': '*' // 解決跨域問題
    }
  },
  // 重要：配置Webpack使用正確的主機名
  chainWebpack: config => {
    config.plugin('define').tap(args => {
      args[0]['process.env'].BASE_URL = '"https://your.domain.com:8443"';
      return args;
    });
  }
}

5?? 配置本地hosts文件

# /etc/hosts 添加
127.0.0.1    your.domain.com
::1          your.domain.com

6?? 啟動項目并驗證

npm run serve

訪問 your.domain.com:8443
?? 瀏覽器地址欄應顯示安全鎖標志

高級配置技巧

解決Chrome證書錯誤

若出現 NET::ERR_CERT_INVALID 錯誤：

打開 chrome://flags/#allow-insecure-localhost
將選項設為 Enabled

跨域請求配置

// 在axios全局配置
import axios from 'axios';
axios.defaults.baseURL = 'https://your.domain.com:8443';
axios.defaults.withCredentials = true;

自動重定向HTTP

// src/main.js
if (process.env.NODE_ENV === 'development') {
  if (window.location.protocol === 'http:') {
    window.location.href = `https://${window.location.host}${window.location.pathname}`;
  }
}

常見問題解決方案

優化建議

添加環境檢測 - 自動切換開發/生產環境

// .env.development
VUE_APP_API_BASE=https://your.domain.com:8443

腳本自動化 - 創建證書生成腳本

#!/bin/bash
mkcert -install
mkcert your.domain.com "*.your.domain.com" localhost 127.0.0.1 ::1
mv your.domain.com+4-key.pem localhost-key.pem
mv your.domain.com+4.pem localhost-cert.pem
echo "證書已更新！"

Git忽略證書 - 避免證書提交

# .gitignore
localhost-key.pem
localhost-cert.pem

通過本文配置，你的Vue項目將獲得：

? 瀏覽器信任的HTTPS連接
? 自定義域名開發環境
? 避免跨域問題的API調用
? 接近生產環境的開發體驗
? 支持移動設備真機測試

安全提示：切勿將生成的localhost-*.pem證書文件提交到版本控制或用于生產環境！此方案僅適用于本地開發。

本文轉載于：https://juejin.cn/post/7522484278568271922

如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起討論學習，一起進步。

posted @ 2025-07-05 17:19 林恒閱讀(383) 評論(0) 收藏舉報

刷新頁面返回頂部

林恒