介绍vite
vue官方提供的前端构建工具。
由两个部分组成
开发服务器:基于ES模块提供丰富的内建功能
构建指令:使用 Rollup 打包代码,提供预设配置
Rollup:
Rollup 是一个 JavaScript 模块打包器,它可以将多个模块打包成一个单独的文件。与其他打包工具(如 Webpack)不同,Rollup 更注重于创建小型、高效的打包文件,适用于构建库、框架和组件等应用场景。
Rollup 采用 ES6 模块的标准语法,可以将代码转换为标准的 ES5 语法,并且支持 Tree Shaking 特性,可以识别并删除未使用的代码,使打包后的文件更小、更高效。
使用 Rollup 打包代码可以提供更小的文件体积和更好的性能,同时还可以通过插件系统扩展其功能,例如添加压缩插件来进一步减小文件体积。
优化两个地方
开发服务器启动
热更新
使用vite配置请求代理
vite 配置
在项目的vite.config.ts文件中配置。
什么是跨域?
同源:两个url请求的协议 protocol、端口 port、域名 host 相同就是同源
跨域:就是不同源的url请求
为什么限制跨域?
出于安全性,浏览器会限制脚本内发起跨源 HTTP 请求 (XMLHttpRequest 和 Fetch API)。
web 应用请求
只能从加载应用程序的同一个请求 HTTP 资源。
除非包含 CORS 响应头。
如何解决跨域问题
常用方法:
jsonp:<script> 不受同源策略限制
跨源域资源共享 CORS:允许web应用服务器进行跨源访问控制
使不同源变成同源(使用反向代理)
什么是反向代理?
代理:请求转发
客服端与服务端之间通过代理服务器进行请求。
代理服务器类型:
正向代理: 客户端告诉代理服务器资源地址。例如带电话,告诉服务商打给谁。
反向代理:客户端只告诉代理服务器想要什么资源。不知道具体地址。
反向代理如何解决跨域问题?
通过反向代理服务器分配不同标识进行访问,不同的域服务端