美文网首页
vue3 + vite2 + https 配置

vue3 + vite2 + https 配置

作者: suliang2010 | 来源:发表于2022-11-20 14:48 被阅读0次

    需求来源

    为了安全考量,后续用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到插件中,用于自动创建和缓存一个自签名的证书;

    以上~

    相关文章

      网友评论

          本文标题:vue3 + vite2 + https 配置

          本文链接:https://www.haomeiwen.com/subject/lolwxdtx.html