您好,欢迎来到网暖!

当前位置:网暖 » 站长资讯 » 建站基础 » 网络技术 » 文章详细 订阅RssFeed

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

来源:网络整理 浏览:178次 时间:2022-11-30

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) };

这样配置就可以解决项目请求跨域的问题。

推荐站点

  • 腾讯腾讯

    腾讯网(www.QQ.com)是中国浏览量最大的中文门户网站,是腾讯公司推出的集新闻信息、互动社区、娱乐产品和基础服务为一体的大型综合门户网站。腾讯网服务于全球华人用户,致力成为最具传播力和互动性,权威、主流、时尚的互联网媒体平台。通过强大的实时新闻和全面深入的信息资讯服务,为中国数以亿计的互联网用户提供富有创意的网上新生活。

    www.qq.com
  • 搜狐搜狐

    搜狐网是全球最大的中文门户网站,为用户提供24小时不间断的最新资讯,及搜索、邮件等网络服务。内容包括全球热点事件、突发新闻、时事评论、热播影视剧、体育赛事、行业动态、生活服务信息,以及论坛、博客、微博、我的搜狐等互动空间。

    www.sohu.com
  • 网易网易

    网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。

    www.163.com
  • 新浪新浪

    新浪网为全球用户24小时提供全面及时的中文资讯,内容覆盖国内外突发新闻事件、体坛赛事、娱乐时尚、产业资讯、实用信息等,设有新闻、体育、娱乐、财经、科技、房产、汽车等30多个内容频道,同时开设博客、视频、论坛等自由互动交流空间。

    www.sina.com.cn
  • 百度一下百度一下

    百度一下,你就知道

    www.baidu.com