Vue CLI 是一款快速開發 Vue.js 應用程序的標準工具集，它為開發者提供了豐富的插件集合，讓開發者能夠更加便捷地進行前端開發。在 Vue CLI 中，跨域請求是一項非常重要的功能，因為許多開發者在前后端分離的開發模式下需要進行跨域請求。本文將會詳細介紹 Vue CLI 中的跨域請求功能。

在 Vue CLI 中，實現跨域請求的方式有兩種：一種是通過配置代理服務器，另一種是通過在開發環境中使用 webpack-dev-server 的 proxyTable 屬性。下面我們將分別介紹這兩種方式的實現方法。

第一種方式是通過配置代理服務器進行跨域請求。首先需要在 package.json 文件中添加一個腳本命令，用于啟動代理服務器。具體命令如下：

"scripts": {
"serve": "vue-cli-service serve",
"proxy": "node build/proxy.js"
}

在上述代碼中，我們添加了一個名為 proxy 的腳本命令，并將其映射到了 build/proxy.js 文件。接著，我們需要在 build/proxy.js 文件中編寫代理服務器的代碼：

const express = require('express')
const httpProxy = require('http-proxy')
const app = express()
const proxy = httpProxy.createProxyServer()
app.all('/api/*', (req, res) =>{
proxy.web(req, res, {
target: 'http://localhost:8080'
})
})
app.listen(3000, () =>{
console.log('Proxy server is running on port 3000')
})

在上述代碼中，我們使用了 Express 框架和 http-proxy 模塊，構建了一個簡單的代理服務器。代理服務器監聽 3000 端口，并將所有 /api/* 開頭的請求轉發到本地的 8080 端口。

第二種方式是通過在開發環境中使用 webpack-dev-server 的 proxyTable 屬性進行跨域請求。我們只需要在 config/index.js 中進行如下配置：

module.exports = {
dev: {
// ...
proxyTable: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
}
}
}
}
// ...
}

在上述代碼中，我們使用了 webpack-dev-server 的 proxyTable 屬性，將所有 /api 開頭的請求轉發到本地的 8080 端口，并將請求頭中的 Origin 字段改為代理服務器所在的域名。

總結來說，Vue CLI 提供了兩種方式實現跨域請求：一種是通過配置代理服務器，另一種是通過在開發環境中使用 webpack-dev-server 的 proxyTable 屬性。開發者可以根據實際情況來選擇合適的方式進行跨域請求。希望本文能夠對您在 Vue CLI 中實現跨域請求的過程有所幫助。