Vue项目Vite配置代理解决跨域问题

本文介绍了Vite,一个由Vue作者开发的快速Web开发工具,它提供了快速启动、模块热更新和按需加载等功能。通过浏览器原生ESimports实现开发服务器,跳过打包过程。文中详细步骤演示了如何创建并运行Vue+Vite项目,以及配置vite.config.js解决跨域问题。通过设置代理,将API请求转发到目标服务器,从而实现本地开发环境的跨域请求。
摘要由CSDN通过智能技术生成

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.expo
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值