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

這樣配置就能夠解決項目請求跨域的問題。