需求來源
為了安全考量查描，后續(xù)用https 模式進行資源訪問
vite vue 創(chuàng)建
// https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application
npm init vue@latest // 本質(zhì)為create-vue,詳細查看下方的圖示
image.png
vite 配置
根據(jù)官網(wǎng)進行配置扣蜻，直接給出 https: true 是不夠的走孽，瀏覽器會直接識別為不可支持的協(xié)議，需要根據(jù)官網(wǎng)翁垂，添加基礎(chǔ)的ssl認證--@vitejs/plugin-basic-ssl 最終為下方的輸出配置铆遭；proxy 請根據(jù)具體情況調(diào)整
image.png
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// 核心方式
// https://cn.vitejs.dev/config/server-options.html#server-https
import basicSsl from '@vitejs/plugin-basic-ssl'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
vueJsx(),
basicSsl()
],
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
}
})
小結(jié)
vue-cli 5.x 中可以使用 https: true 直接進行配置；這應(yīng)該是webpack內(nèi)部做了一些事情沿猜；vite 2.x 需要主動引入@vitejs/plugin-basic-ssl到插件中枚荣，用于自動創(chuàng)建和緩存一個自簽名的證書；
以上~
