情境如果已經拿到一個網站是"資料夾類型"例如剛切好html + css + javascript,測試時想使用https開啟瀏覽器,Live Server雖然也可以,但是比較麻煩複雜,以下方式AI提供測試改良,蠻簡單的。
PS.已經是vite專案的話1>5>6即可
1.下載
mkcert,一般windows選mkcert-v1.4.4-windows-amd64.exe,下載後重新命名"mkcert.exe",放於C:\Windows或C:\Windows\System32底下
2.新增vite.config.js package.json .gitignore到專案底下,內容如下
vite.config.js
import { defineConfig } from 'vite';
import fs from 'fs';
export default defineConfig({
server: {
https: {
key: fs.readFileSync('./localhost-key.pem'),
cert: fs.readFileSync('./localhost.pem')
},
port: 3000,
open: true
}
});
package.json
{
"name": "20260222_1",
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview",
"deploy": "vite build && gh-pages -d dist"
},
"devDependencies": {
"vite": "^7.2.7",
"gh-pages": "^6.3.0"
}
}
.gitignore
node_modules/
dist/
.vite/
npm-debug.log*
.yarn-debug.log*
.yarn-error.log*
.pnpm-debug.log*
.vscode/
.DS_Store
Thumbs.db
# mkcert local certificates
localhost.pem
localhost-key.pem
3.改package.json裡的name變成你的專案名稱
4.vs code > 終端機(termainal) > npm install -y
5.vs code > 終端機(termainal) > mkcert localhost(產生憑證)
6.vs code > 終端機(termainal) > npm run dev