记录---在Vue项目中启用HTTPS本地开发
<h1 data-id="heading-0">🧑💻 写在开头</h1><p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<p> </p>
<blockquote>
<p>现代前端开发中，启用HTTPS本地环境越来越重要。本文将详细介绍如何在Vue项目中配置HTTPS开发服务器，使用mkcert工具生成可信证书，解决跨域问题并模拟真实生产环境。</p>
</blockquote>
<div>
<div>
<h3 data-id="heading-0">为什么需要HTTPS本地开发？</h3>
<ol>
<li>使用浏览器新特性（如地理位置API）</li>
<li>解决第三方登录（OAuth）的localhost限制</li>
<li>测试Service Worker和PWA功能</li>
<li>避免混合内容警告（Mixed Content）</li>
<li>模拟真实生产环境行为</li>
</ol><hr>
<h3 data-id="heading-1">完整配置步骤</h3>
<h4 data-id="heading-2">1️⃣ 安装mkcert证书工具</h4>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"># 查看系统架构
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</pre>
</div>
<h4 data-id="heading-3">2️⃣ 创建并安装本地CA</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"># 安装本地证书颁发机构
mkcert -install</pre>
</div>
<p>✅ 系统钥匙串将出现名为 "mkcert development CA" 的证书</p>
<h4 data-id="heading-4">3️⃣ 生成域名证书</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"># 为自定义域名和本地地址生成证书
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</pre>
</div>
<h4 data-id="heading-5">4️⃣ Vue项目配置</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 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['process.env'].BASE_URL = '"https://your.domain.com:8443"';
return args;
});
}
}</pre>
</div>
<h4 data-id="heading-6">5️⃣ 配置本地hosts文件</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"># /etc/hosts 添加
127.0.0.1 your.domain.com
::1 your.domain.com</pre>
</div>
<h4 data-id="heading-7">6️⃣ 启动项目并验证</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">npm run serve</pre>
</div>
<div>
<div>
<p>访问 your.domain.com:8443<br>
🔒 浏览器地址栏应显示安全锁标志</p>
<hr>
<h3 data-id="heading-8">高级配置技巧</h3>
<h4 data-id="heading-9">解决Chrome证书错误</h4>
<p>若出现 <strong>NET::ERR_CERT_INVALID</strong> 错误：</p>
<ol>
<li>打开 <code>chrome://flags/#allow-insecure-localhost</code></li>
<li>将选项设为 <strong>Enabled</strong></li>
</ol>
<h3 data-id="heading-10">跨域请求配置</h3>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 在axios全局配置
import axios from 'axios';
axios.defaults.baseURL = 'https://your.domain.com:8443';
axios.defaults.withCredentials = true;</pre>
</div>
<h3 data-id="heading-11">自动重定向HTTP</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// src/main.js
if (process.env.NODE_ENV === 'development') {
if (window.location.protocol === 'http:') {
window.location.href = `https://${window.location.host}${window.location.pathname}`;
}
}</pre>
</div>
<h3 data-id="heading-12">常见问题解决方案</h3>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202507/2149129-20250705171713077-980502945.png" alt="" loading="lazy"></p>
<h3 data-id="heading-13">优化建议</h3>
<ol>
<li>添加环境检测 - 自动切换开发/生产环境</li>
</ol>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// .env.development
VUE_APP_API_BASE=https://your.domain.com:8443</pre>
</div>
<ol start="2">
<li>脚本自动化 - 创建证书生成脚本</li>
</ol>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">#!/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 "证书已更新！"</pre>
</div>
<ol start="3">
<li>Git忽略证书 - 避免证书提交</li>
</ol></div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"># .gitignore
localhost-key.pem
localhost-cert.pem</pre>
</div>
<div>
<div>
<p>通过本文配置，你的Vue项目将获得：</p>
<ul>
<li>✅ 浏览器信任的HTTPS连接</li>
<li>✅ 自定义域名开发环境</li>
<li>✅ 避免跨域问题的API调用</li>
<li>✅ 接近生产环境的开发体验</li>
<li>✅ 支持移动设备真机测试</li>
</ul>
<p><strong>安全提示</strong>：切勿将生成的localhost-*.pem证书文件提交到版本控制或用于生产环境！此方案仅适用于本地开发。</p>
</div>
<div>
<h2>本文转载于：https://juejin.cn/post/7522484278568271922</h2>
</div>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></p>
</div>
</div><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/18967539
頁:
[1]