使用 vite 配置请求代理

 介绍vite

        vue官方提供的前端构建工具。

由两个部分组成

        开发服务器:基于ES模块提供丰富的内建功能

        构建指令:使用 Rollup 打包代码,提供预设配置

Rollup:

        Rollup 是一个 JavaScript 模块打包器,它可以将多个模块打包成一个单独的文件。与其他打包工具(如 Webpack)不同,Rollup 更注重于创建小型、高效的打包文件,适用于构建库、框架和组件等应用场景。

Rollup 采用 ES6 模块的标准语法,可以将代码转换为标准的 ES5 语法,并且支持 Tree Shaking 特性,可以识别并删除未使用的代码,使打包后的文件更小、更高效。

使用 Rollup 打包代码可以提供更小的文件体积和更好的性能,同时还可以通过插件系统扩展其功能,例如添加压缩插件来进一步减小文件体积。

优化两个地方

        开发服务器启动

使用 vite 配置请求代理_第1张图片

使用 vite 配置请求代理_第2张图片

        热更新

使用 vite 配置请求代理_第3张图片

使用vite配置请求代理

使用 vite 配置请求代理_第4张图片

vite 配置

        在项目的vite.config.ts文件中配置。

使用 vite 配置请求代理_第5张图片

什么是跨域?

        同源:两个url请求的协议 protocol、端口 port、域名 host 相同就是同源

        跨域:就是不同源的url请求

为什么限制跨域?

        出于安全性,浏览器会限制脚本内发起跨源 HTTP 请求 (XMLHttpRequest 和 Fetch API)。

        web 应用请求

                只能从加载应用程序的同一个请求 HTTP 资源。

                除非包含 CORS 响应头。

如何解决跨域问题

        常用方法:

                jsonp:

你可能感兴趣的:(vue3,vue)