需求来源
为了安全考量,后续用https 模式进行资源访问
vite vue 创建
// https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application
npm init vue@latest // 本质为create-vue,详细查看下方的图示
image.png
vite 配置
image.png根据官网进行配置,直接给出 https: true 是不够的,浏览器会直接识别为不可支持的协议,需要根据官网,添加基础的ssl认证--@vitejs/plugin-basic-ssl 最终为下方的输出配置;proxy 请根据具体情况调整
// 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到插件中,用于自动创建和缓存一个自签名的证书;
以上~
网友评论