VUE 在localhost執行debug的簡單設定(Vite)

在我們用vue做為前端開發架構時， 我們想要在local端進行debug， 如果我們要自定Debug Server的Port 同時也想在另外一台電腦debug，我們可以用以下方式來設定(vite)， 透過網路連上Debug server。

import { fileURLToPath, URL } from 'url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vuetify from 'vite-plugin-vuetify';

// https://vitejs.dev/config/
export default defineConfig({
	// ...
    server:{
    host:"0.0.0.0",
    port:4000,
    proxy:{}

  }
});

Host 設定

在vite.config.ts增加server:{}

Host的屬性可以選擇使用的網卡(或WiFi)IP，或是內網的網段(例 192.168.0.x)或是localhost。這裡我選擇用0.0.0.0，綁定電腦上所有的介面卡。

Host

server:{
	host:"0.0.0.0",
}

Port

在port的屬性可以設定好希望Debug的 Port

server:{
	port:4000,
}

如果只想指定debug的Port我們可以直接用sever.port

設定好後我們就可以在瀏覽器輸入Debug用的URL

Proxy 屬性

如果是用前後端分離的方式做開發已有現成的API HOST。 在API Host有設定安全性，都會以CORS限制連線，CORS問題，可以使用proxy設定繞過debug的CORS的檢查。在Server:{}裡設定proxy，它的設定方法類似nginx的設定。可參考以下範例:

server:{
	proxy:{
	 		// test API host
      '/api': {
        target: 'http://[API_HOST]:PORT/api',
        changeOrigin: true,
      },
      // debug host
      '/': 'http://localhost:5000',
	}
}

當 url的path是以/api字串 的網址設定指向target， 就會導向target的網址例

http://apihost/api

瀏覽器會將Request送給Debug Server(Port 4000)，Debug Sever再向真正的API Host發送請求

changeOrigin可協助修改轉發時送給API Host的header

這樣就可以用簡單的步驟，在自己的local端，不需額外的CORS設定，與後端API配進行開發。

參考

https://vite.dev/config/server-options