Vue Cli3(代理配置)

cli3


  1. vue ui 映射當(dāng)前項(xiàng)目的配置,在瀏覽器內(nèi)實(shí)現(xiàn) GUI 操作:直接支持創(chuàng)建項(xiàng)目,配置文件
  2. npm run dev 啟動(dòng)項(xiàng)目指令,在 Vue Cli 3 內(nèi)會(huì)啟動(dòng)兩個(gè)服務(wù)。一個(gè)是 localhost,另一個(gè)是當(dāng)前 ip 下的地址:避免了手動(dòng)配置需要修改,ip不一樣不能啟動(dòng)器只能啟動(dòng)一個(gè)的弊端
  3. npx 指令:?jiǎn)?dòng)服務(wù)可用 npx vue-cli-service serve — npx 會(huì)自動(dòng)查找當(dāng)前依賴包中的可執(zhí)行文件,如果找不到,就會(huì)去 PATH 里找。如果依然找不到,就會(huì)臨時(shí)創(chuàng)建用完即刪掉
  4. 通過(guò) cli3,vue ui是一個(gè)全局指令,在終端執(zhí)行 vue ui 命令,就能得到 cli3 的項(xiàng)目管理頁(yè)面:依賴管理,項(xiàng)目啟動(dòng)、編譯,項(xiàng)目配置均是圖形化操作

Vue是沒(méi)有任何配置文件的,如果是修改配置可在GUI上直接修改,如果是需要增加配置,如配置 Nginx 代理實(shí)現(xiàn)跨域,則需要新建一個(gè)配置文件修改即可。


本地代理

在根目錄下新建一個(gè) vue.config.js 文件,拷貝如下代碼

module.exports = {
    // cli3 代理是從指定的target后面開(kāi)始匹配的,不是任意位置;配置pathRewrite可以做替換
    devServer: {
      proxy: {
        '/your api': {
          target: 'your server',
          changeOrigin: true,
          pathRewrite: { }
        }
      }
    }
  }

特別注意:your api 就是請(qǐng)求后臺(tái)域名后的相同部分,我理解vue實(shí)現(xiàn)是key-value方式,此處如果是 "/test/api/": { },那么請(qǐng)求的時(shí)候 /test/api/getUserInfo,就是地址 target + /test/api/getUserInfo,若請(qǐng)求key對(duì)應(yīng)不上則代理就會(huì)無(wú)效了。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容