(四)Vite

最新推荐文章于 2024-10-16 11:23:07 发布

一只卑微的菜狗

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量130

点赞数

分类专栏：仿饿了么项目文章标签：前端 javascript http

本文链接：https://blog.csdn.net/weixin_44805589/article/details/130657362

版权

仿饿了么项目专栏收录该内容

4 篇文章 0 订阅

订阅专栏

背景

因为mock Server存在跨域问题，需要使用vite解决

为什么要限制跨域

出于安全性，浏览器会限制脚本内发起跨域http请求
- 限制 XMLHttpRequest 和 Fetch API
Web应用
- 只能从加载应用程序的同一个请求 HTTP资源进行跨域
- 包含CORS响应头进行跨域

解决跨域

jsonp：<scipt> 不受同源策略限制
跨域资源共享CORS：允许 Web应用服务器进行跨源 访问控制
使不同的源变成同源（反向代理）

vite

前端构建工具
组成：
- 开发服务器：基于ES模块提供丰富的内建功能
- 构建指令：使用Rollup打包代码，提供预设配置

vite优点：

开发大型项目时，应用越大，就会有性能问题：

启动本地开发服务器的时间会很久
热更新慢

vite解决上述问题

开发服务器启动

vite 从依赖打包和源码打包两方面提升性能

依赖：使用esbuild 进行依赖预打包，esbuld使用 go 编写，比JavaScript-based的打包工具快10-100倍
源码：使用浏览器原生es module提供源码，让浏览器接管打包工具的部分工作

热更新

vite 在文件热更新做优化

使用 ESM 不需要重新编译：一些打包工具的开发服务器在文件更改时，需要重新构建整个项目，来获取新的模块依赖关系
使用浏览器缓存加速：Vite 利用 HTTP 头来加速整个页面的重新加载

vite 代理

在vue项目的vite.config.js下进行配置，如：

export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  // 配置vite请求代理
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8000',
      '/imgs': 'http://localhost:8000',
    }
  }
})