vue3 + vite2 + https 配置

需求来源

为了安全考量，后续用https 模式进行资源访问

vite vue 创建

  // https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application
 npm init vue@latest // 本质为create-vue,详细查看下方的图示

image.png

vite 配置

根据官网进行配置，直接给出 https: true 是不够的，浏览器会直接识别为不可支持的协议，需要根据官网，添加基础的ssl认证--@vitejs/plugin-basic-ssl 最终为下方的输出配置；proxy 请根据具体情况调整

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')
    }
  }
})

小结

vue-cli 5.x 中可以使用 https: true 直接进行配置；这应该是webpack内部做了一些事情；vite 2.x 需要主动引入@vitejs/plugin-basic-ssl到插件中，用于自动创建和缓存一个自签名的证书；

以上~