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

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

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