一涝动、開發(fā)環(huán)境（本地） dev
項(xiàng)目用
@vue/cli 4.0.5搭建的鸭廷，采用proxyTable配置代理跨域钓丰。
打開項(xiàng)目根目錄下的config/index.js文件仆嗦，參考以下proxyTable部分的配置：
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
// *********代理跨域 主要代碼**********
proxyTable: {
'/api': { //匹配接口路徑中的 /api
target: 'http://********:9001/api', //目標(biāo)接口地址，設(shè)置調(diào)用的接口域名和端口號(hào) 別忘了加http练链、https
changeOrigin: true, //是否跨域
secure: true, // 允許https請(qǐng)求
pathRewrite: {
'^/api': '' // 路徑重寫 將 target 中的目標(biāo)接口地址重寫為 /api
}
}
},
}
注：每次修改配置文件需要重啟服務(wù)才能生效
二、生產(chǎn)環(huán)境（線上/本地服務(wù)器） build
項(xiàng)目打包發(fā)布后奴拦，由于
proxyTable不能再使用媒鼓，需要用Nginx替代前者的代理功能。
Nginx簡(jiǎn)介
Nginx是一款輕量級(jí)的web服務(wù)器错妖，可以把web項(xiàng)目發(fā)布向互聯(lián)網(wǎng)绿鸣。
Nginx解決vue生產(chǎn)環(huán)境（線上/本地服務(wù)器）跨域
安裝好Nginx之后，打開安裝目錄下的conf/nginx.conf文件暂氯，參考以下server的簡(jiǎn)單配置：
server {
listen 9091; #監(jiān)聽的端口
server_name localhost; #服務(wù)器名稱
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root E:\hld-work\university\dist; #項(xiàng)目物理路徑
index index.html index.htm; #項(xiàng)目的默認(rèn)首頁
}
location /api { #檢測(cè)并替換接口內(nèi)的字符串
proxy_pass http://**********:9001/api; #跨域訪問的目標(biāo)URL
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 100m;
}
}
注：每次修改配置文件需要重啟服務(wù)才能生效
Nginx的常用相關(guān)命令：
需要在Nginx文件目錄下運(yùn)行命令行工具
啟動(dòng)
start nginx 或 nginx.exe
停止
nginx.exe -s stop 或 ginx.exe -s quit
注：stop是快速停止nginx潮模，可能并不保存相關(guān)信息；quit是完整有序的停止nginx痴施，并保存相關(guān)信息擎厢。
重新載入
nginx.exe -s reload
重新打開日志文件
nginx.exe -s reopen
查看版本
nginx -v
