大家好，我是[小鑫同學]。一位長期從事前端開發的程式設計愛好者，我信奉程式設計最重要的是分享。請跟随小鑫同學的步伐，一起帶你暢遊不一樣的前端世界~
1. 前言
在以前的一篇文章中講述了在前端開發時通過配置自簽名證書來完成必須使用HTTPS協定才能工作的功能。那麼當你同時需要在手機端預覽的時候，可能就要将公鑰證書也安裝到手機上了，但無論你通過什麼方式将證書發送到手機中都不如我寫的這個
Vite
插件使用着友善，那麼一起來看一下我是怎麼做的~
2. 添加調試Vite環境配置
在Vue.js開發時一般都在程式中通過
debugger
關鍵字來中斷程式進行調試就可以搞定大多數的問題，但很少會直接斷點調試建構腳本，那麼請按照下面的4步來配置調試環境，以便更好的完成後面插件的開發~
- 在項目根目錄建立名為
.vscode/launch.json
- 在調試視窗右下角點選添加配置，并選擇
Node.js：Launch via NPM
- 調整增加的
Launch via NPM
- 在
vite.config.ts
Launch via NPM
到這裡就成功進入斷點了，怎麼樣，你配置好了嗎~ 🤺
3. Vite插件模闆及基本配置
首先我們在項目根目錄下增加名為
plugins/vite-plugin-certificate-install.ts
的插件檔案；
import type { Plugin, ResolvedConfig, ViteDevServer } from "vite";
export type Options = {
path: string,
pem: string,
}
const certificateInstall = (options: Options) => {
const { path: _path, pem: _pem } = options;
let config: ResolvedConfig;
return {
// 1、指定插件名稱
name: 'vite-plugin-certificate-install',
// 2、指定插件在serve時運作，預設serve和build均運作
apply(_, { command }) {
return command === 'serve'
},
// 3、存儲最終解析的配置
configResolved(_config) {
config = _config
},
// 4、配置開發伺服器鈎子
configureServer(server: ViteDevServer) {
server.middlewares.use((req, res, next) => {
})
},
} as Plugin;
}
export default certificateInstall;
接着安裝插件到
vite.config.ts
，ts環境受
tsconfig.json
檔案限制，可能需要将編寫的腳本顯示的添加到
include
配置中：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 1、導入插件
import certificateInstall from './plugins/vite-plugin-certificate-install';
export default defineConfig({
plugins: [
vue(),
// 2、安裝插件
certificateInstall({ path: './keys', pem: 'agent2.pem' })
]
})
// tsconfig.node.json
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
// 新增
"include": ["vite.config.ts", "./plugins/vite-plugin-certificate-install.ts"]
}
到這裡最基礎的插件已經準備并安裝好了~
4. 編寫開發伺服器中間件
編碼說明：
- 證書檔案受浏覽器影響直接通路可能至會渲染出證書内容而不能觸發移動裝置安裝。
- 隻擷取resolvedUrls中的network選項是因為移動裝置通過統一網絡進行擷取，local位址将無法在移動裝置直接通路，是以local相容無意義。
4.1 重寫printUrls函數：
重寫printUrls函數，擴充其支援輸出安裝證書的二維碼；
// 儲存一份内置的printUrls函數；
const _print = server.printUrls;
// 重寫printUrls函數，擴充功能；
server.printUrls = () => {
_print();
// 擷取 network 中的位址用于合成url後生成二維碼
const host = server.resolvedUrls?.network[0];
if (host) {
console.log(`${bold('Install Root Certificate on a Mobile Device ⤦')}`);
qrcode.generate(`${host}__certificate/`, { small: true });
} else {
console.log(`${green('Failed to get the network address.')}`);
}
}
4.2 編寫開發服務中間件：
攔截執行的安裝證書請求，并讀驗證書檔案後寫回移動裝置；
server.middlewares.use((req, res, next) => {
const { method, originalUrl } = req;
if (method === 'GET' && originalUrl === '/__certificate/') {
const pemPath = path.resolve(_path, _pem);
if (!fs.existsSync(pemPath)) throw new Error(`Make sure that '${pemPath}' exists.`);
const pem = fs.readFileSync(path.resolve(_path, _pem));
res.writeHead(200, {
'Content-Type': 'application/octet-stream',
'Content-Disposition': `filename=${_pem}`,
})
res.end(pem);
} else {
next();
}
})
4.3 準備簽名檔案後啟動Vite開發服務：
在項目根目錄的
keys
目錄下放置
agent2.pem
證書，執行
npm run dev
啟動Vite開發服務：
5. Vite插件打包分發
在插件打包時我們還是要考慮到使用者非TypeScript開發環境，是以需要轉為JavaScript後進行分發，tsup子產品利用esbuild在不需要任何配置的情況下就可以對Ts進行編譯。
需要在項目中安裝tsup到開發依賴，請不要直接通過npx使用，可能會因為找不到typescript子產品而終止掉部分編譯流程；
安裝後使用如下指令編譯插件，需要指定入口檔案、出口目錄、編譯.d.ts檔案、輸出子產品類型選項：
tsup ./plugins/vite-plugin-certificate-install.ts --outDir output --dts --format cjs,esm
6. 利用腳手架快速搭建Vite插件：
generator-vite-plugin
基于Yeoman的Vite插件生成器：
全局安裝 yeoman 和 generator
$ npm i -g yo
$ npm i -g generator-vite-plugin
$ yo vite-plugin