u

notes/前端开发/https/nginx_https配置.md

@@ -0,0 +1,97 @@
+## mkcer (本地)
+
+### 下载
+
+下载地址：https://github.com/FiloSottile/mkcert/releases
+
+根据系统下载即可
+
+### **安装**
+
+打开 cmd 执行命令
+
+```bash
+mkcert-v1.4.4-windows-amd64.exe -install
+```
+
+点击 是 即可
+
+![image-20250607143422764](./assets/nginx_https%E9%85%8D%E7%BD%AE/image-20250607143422764.png)
+
+安装成功后会提示
+
+![image-20250607143508023](./assets/nginx_https%E9%85%8D%E7%BD%AE/image-20250607143508023.png)
+
+### 生成自签证书
+
+执行命令
+
+```bash
+mkcert-v1.4.4-windows-amd64.exe localhost 127.0.0.1 ::1 192.168.1.131
+```
+
+成功提示
+
+![image-20250607145509961](./assets/nginx_https%E9%85%8D%E7%BD%AE/image-20250607145509961.png)
+
+这样就成功啦，然后生成的证书在 **mkcert-v1.4.4-windows-amd64.exe** 的同级目录下
+
+### 配置 nginx
+
+配置文件参考
+
+```
+#user  nobody;
+worker_processes  1;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+    include       mime.types;
+    default_type  application/octet-stream;
+
+    sendfile        on;
+    keepalive_timeout  65;
+
+    # ✅ HTTP 服务监听 8088
+    server {
+        listen       8088;
+        server_name  localhost;
+
+        location / {
+            root   html;
+            index  index.html index.htm;
+        }
+
+        error_page   500 502 503 504  /50x.html;
+        location = /50x.html {
+            root   html;
+        }
+    }
+
+    # ✅ HTTPS 服务监听 443（使用 mkcert 生成的证书）
+    server {
+        listen       443 ssl;
+        server_name  192.168.1.131;
+
+        ssl_certificate      D:/Devtool/localhost+3.pem;
+        ssl_certificate_key  D:/Devtool/localhost+3-key.pem;
+
+        ssl_session_cache    shared:SSL:1m;
+        ssl_session_timeout  5m;
+
+        ssl_protocols TLSv1.2 TLSv1.3;
+        ssl_ciphers  HIGH:!aNULL:!MD5;
+        ssl_prefer_server_ciphers  on;
+
+        location / {
+            root   html;  # 若是 Vue 项目请替换为 dist 目录路径
+            index  index.html index.htm;
+            try_files $uri $uri/ /index.html;
+        }
+    }
+}
+```
+

notes/前端开发/https/vite_https配置.md

@@ -0,0 +1,57 @@
+## **@vitejs/plugin-basic-ssl**
+
+安装
+
+```bash
+pnpm add -D @vitejs/plugin-basic-ssl
+```
+
+在 **vite.config.js** 中进行使用
+
+```ts
+import basicSsl from '@vitejs/plugin-basic-ssl'
+
+export default defineConfig({
+  plugins: [vue(), basicSsl()],
+  server: {
+    host: '0.0.0.0',
+    https: true
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src')
+    }
+  }
+})
+```
+
+重新运行项目即可
+
+
+
+## mkcer (避免警告)
+
+参考文档  [nginx_https配置.md](./nginx_https配置.md) 的配置方法
+
+修改 **vite.config.js** 文件
+
+```js
+import fs from 'fs'
+
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    host: '0.0.0.0',
+    https: {
+        key: fs.readFileSync('D:/Devtool/localhost+3-key.pem'),
+        cert: fs.readFileSync('D:/Devtool/localhost+3.pem'),
+    }
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src')
+    }
+  }
+})
+```
+