Vite — 一个Vue作者开发的Web开发工具，它具有快速的冷启动、及时的模块热更新、真正的按需加载。
Vite基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。既然这么好，那就赶紧体验下。
1.创建并运行Vue + Vite项目
创建基于Vite的项目比较简单，这里就不多讲了，几行命令搞定。
## 创建项目 yarn create vite-app <project-name> ## 进入项目根目录 cd <project-name> ## 安装依赖 yarn ## 运行项目 yarn dev
复制
生成的项目结构也是十分简单，默认是没有vite.config.js。
├─node_modules # 项目依赖 ├─public # 公共文件 ├─App.vue # 应用入口 ├─index.html # 页面入口 ├─package.json # 描述文件
复制
2.配置代理解决跨域问题
项目创建完成就可以本地运行了。解决跨域问题，还需要编写配置文件。新建vite.config.js。
const path = require('path') module.exports = { hostname: '0.0.0.0', port: 9999, // 反向代理 proxy: { '/api': { target: 'http://xxx.xxxxx.xxx/', changeOrigin: true, rewrite: path => path.replace(/^\/api/, '') } } }
复制
api这个可以自己定义，target是你需要代理的地址，比如你的请求地址是
http://openapi.nmwap.com/user/login
复制
那target里面应该这么写：
target: 'http://openapi.nmwap.com/',
复制
编写请求的地方：
import { liSend } from '../utils/request' // 测试请求 export const login = (obj) => { return liSend("post", "api/user/login", obj) };
复制
这样配置就可以解决项目请求跨域的问题。
