[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-nodeaxios自動加上網址":3},{"id":4,"slug":5,"title":6,"description":7,"content":8,"date":9,"image":10,"imageAlt":6,"author":11,"categories":14,"path":21,"minRead":22},147,"nodeaxios自動加上網址","[Node]axios自動加上網址","axios自動加上網址 我使用了axios來實作vue中請求資料的部分，但網站中有許多地方要請求不同地方的資料 […]","\u003Ch1>axios自動加上網址\u003C\u002Fh1>\n\u003Cp>我使用了axios來實作vue中請求資料的部分，但網站中有許多地方要請求不同地方的資料時，就需要有個地方統一管理這個位置，這時就可以用到axios.baseURL\u003C\u002Fp>\n\u003Cp>只要在main.js中宣告axios後加上這行\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">import axios from &#039;axios&#039;;\n\naxios.defaults.baseURL=&#039;http:\u002F\u002Flocalhost:3031&#039;;  \u002F\u002F宣告baseURL\n\napp.use(VueAxios, axios)\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>之後只要使用了axios，他會自動加上baseURL，例如\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">let url = &#039;\u002Fapi&#039;\n axios.get(url)\n .then((res)=&gt;{\n\n })\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>他就會送出這個位置http:\u002F\u002Flocalhost:3031\u002Fapi\u003C\u002Fp>\n\u003Cp>通常還會搭配.env文件來使用，將環境變數先存在.env中，例如建立一個.env.dev的文件，裡面寫下\u003C\u002Fp>\n\u003Cpre>\u003Ccode>NODE_ENV=development\nAPI_URL=http:\u002F\u002Flocalhost:3031\u002F\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>然後在main.js中串上env的環境變數就可以了\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">import axios from &#039;axios&#039;;\n\naxios.defaults.baseURL=process.env.API_URL\n\u003C\u002Fcode>\u003C\u002Fpre>\n","2022-11-02T10:00:27","",{"name":12,"link":13},"Chih Fan","http:\u002F\u002Fpost.billxu.net",[15,17,19],{"name":16,"slug":16},"frontend",{"name":18,"slug":18},"node",{"name":20,"slug":20},"vue","\u002Fblog\u002Fnodeaxios自動加上網址",1]