需求來源

為了安全考量，后續(xù)用https 模式進(jìn)行資源訪問

vite vue 創(chuàng)建

  // https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application
 npm init vue@latest // 本質(zhì)為create-vue,詳細(xì)查看下方的圖示

image.png

vite 配置

根據(jù)官網(wǎng)進(jìn)行配置，直接給出 https: true 是不夠的，瀏覽器會直接識別為不可支持的協(xié)議，需要根據(jù)官網(wǎng)，添加基礎(chǔ)的ssl認(rèn)證--@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 直接進(jìn)行配置；這應(yīng)該是webpack內(nèi)部做了一些事情；vite 2.x 需要主動引入@vitejs/plugin-basic-ssl到插件中，用于自動創(chuàng)建和緩存一個自簽名的證書；

以上~