這次重點(diǎn)的坑是反向代理。

1。項(xiàng)目中配置代理，為了跨域請(qǐng)求數(shù)據(jù)

項(xiàng)目根目錄中新建vite.config.ts文件

在文件中添加配置代理

注意：其中 '/api' 和target 的地址后面沒(méi)有 '/'

2。在項(xiàng)目根目錄中新建Httprequest.ts文件，引入axios，并封裝請(qǐng)求 引入axios就不多說(shuō)了，npm自行安裝就好

import axios from 'axios';
import {
  LicId,
  FrontCode,  
  getTime,
  WxAppId
} from './utils/index';
import {
  getToken
} from './utils/token';


// 創(chuàng)建一個(gè)axios實(shí)例
const instance = axios.create({
  baseURL: '/api', // 設(shè)置請(qǐng)求的基礎(chǔ)URL
  timeout: 5000, // 設(shè)置請(qǐng)求超時(shí)時(shí)間
});


// 請(qǐng)求攔截器
instance.interceptors.request.use(
  async (config) => {
   
  // 發(fā)送token請(qǐng)求
    let token = localStorage.getItem('token')?localStorage.getItem('token'):'';
    if(!token){
      token = await getToken();
    }
      
    // 在發(fā)送請(qǐng)求之前添加自定義header信息
    config.headers['Authorization'] ='Bearer ' + token;
    config.headers['TimeStamp'] = getTime();
    config.headers['LicId'] = LicId;
    config.headers['FrontCode'] = FrontCode;
    config.headers['WxAppId'] = WxAppId;   

    
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 響應(yīng)攔截器
instance.interceptors.response.use(
  (response) => {
    // 對(duì)響應(yīng)數(shù)據(jù)進(jìn)行處理
    return response.data;
  },
  (error) => {
    return Promise.reject(error);
  }
);


  

// 封裝GET請(qǐng)求
export function get(url:string, params:any) {
  return instance.get(url, { params });
}

// 封裝POST請(qǐng)求
export function post(url:string, data:any) {
  return instance.post(url, data);
}

注意這里，baseURL要和代理中設(shè)置的一致

項(xiàng)目正常編寫(xiě)，本地運(yùn)行，測(cè)試正常后，準(zhǔn)備上線docker

3。vite打包。注意調(diào)整靜態(tài)資源路徑，注意配置package.json，除此以外也沒(méi)什么

正常按配置執(zhí)行打包 npm run build:prod —— 這里和package.json里一樣就可以了

執(zhí)行完成后，得到dist文件夾。上線文件就是它了

現(xiàn)在轉(zhuǎn)到服務(wù)器上操作

1。將dist上傳到服務(wù)器的文件夾里，一般是在/www/wwwroot 文件夾下面建立一個(gè)新的文件夾，比如叫做 newpro

將dist上傳到newpro，注意是整個(gè)文件夾上傳，不是dist里面的內(nèi)容上傳

2。在newpro文件夾里，建立Dockerfile文件，可以在本地寫(xiě)好，傳上去。注意：這個(gè)文件沒(méi)有擴(kuò)展名

文件內(nèi)容如下：

# 使用官方的 Nginx 鏡像作為基礎(chǔ)鏡像
FROM nginx:latest

# 將本地dist文件夾內(nèi)的內(nèi)容復(fù)制到容器中的nginx默認(rèn)工作目錄
COPY dist /usr/share/nginx/html

# 替換nginx配置文件（如果需要自定義）
#COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露Nginx的默認(rèn)端口
EXPOSE 80

# 啟動(dòng)Nginx服務(wù)
CMD ["nginx", "-g", "daemon off;"]

上傳到服務(wù)器后：

現(xiàn)在在newpro文件夾里進(jìn)入終端，執(zhí)行docker命令，生成鏡像。如果你用的是寶塔面板，那么就是下面這樣的

在終端中執(zhí)行以下命令,注意最后有個(gè) 點(diǎn)

docker build -t xxx(英文鏡像名稱) . 

執(zhí)行成功后，再執(zhí)行

docker run -d --name 英文的容器名稱（自己起） -p 10726:80 鏡像名稱（剛剛生成的）

注意： 10726：80 分別代表服務(wù)器的端口和docker里的端口。這個(gè)操作表示把服務(wù)器的10726端口映射到docker的80端口上 這個(gè)10726自己寫(xiě)就可以，只要不和其它端口沖突就行

到此，docker上線完畢

然后要在服務(wù)器的nginx中，發(fā)布網(wǎng)站，將域名綁定到網(wǎng)站上

網(wǎng)站的配置文件如下：

server
{
    listen 80;
    server_name xxx.net(綁定的域名);
    index index.html index.htm;
    #root /www/wwwroot/hua.crabstech.com;
    location /api/ {
        proxy_pass https://api.net:9006/; #API地址:端口
    }
     location / {

                proxy_pass http://localhost:10726;
        }
    
}

重要坑點(diǎn)來(lái)了

vite配置的代理，當(dāng)dist離開(kāi)本地電腦時(shí)，vite就已經(jīng)不再負(fù)責(zé)了，服務(wù)器上的代理，由nginx代理來(lái)完成

重點(diǎn)：

這個(gè)代理，要在服務(wù)器nginx，不要在docker里做！

這個(gè)代理，要在服務(wù)器nginx，不要在docker里做！

這個(gè)代理，要在服務(wù)器nginx，不要在docker里做！

重要的事情說(shuō)三遍

更重要的是，和vite.config.ts中不同的是，要加上末位的兩個(gè) '/'

一定要加

api后面的 '/'不加，nginx配置文件會(huì)報(bào)錯(cuò)

地址后面的'/'不加，反向代理配置不生效

一定要加！一定要加！一定要加！

如果做完以上這些，反向仍然不生效，可以參考下面的博文試試

Nginx問(wèn)題之反向代理無(wú)法成功_nginx x-forwarded-for不生效-CSDN博客

省流解釋?zhuān)阂诒辉L問(wèn)的API服務(wù)器的nginx配置中，添加當(dāng)前網(wǎng)站域名。

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-830271.html

到了這里，關(guān)于vite+vue3+ts項(xiàng)目上線docker 配置反向代理API的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！