Vue Cli3(代理配置)

cli3
vue ui 映射當前項目的配置,在瀏覽器內實現 GUI 操作:直接支持創建項目,配置文件
npm run dev 啓動項目指令,在 Vue Cli 3 內會啓動兩個服務。一個是 localhost,另一個是當前 ip 下的地址:避免了手動配置需要修改,ip不一樣不能啓動器只能啓動一個的弊端
npx 指令:啓動服務可用 npx vue-cli-service serve — npx 會自動查找當前依賴包中的可執行文件,如果找不到,就會去 PATH 裏找。如果依然找不到,就會臨時創建用完即刪掉
通過 cli3,vue ui是一個全局指令,在終端執行 vue ui 命令,就能得到 cli3 的項目管理頁面:依賴管理,項目啓動、編譯,項目配置均是圖形化操作
Vue是沒有任何配置文件的,如果是修改配置可在GUI上直接修改,如果是需要增加配置,如配置 Nginx 代理實現跨域,則需要新建一個配置文件修改即可。

本地代理
在根目錄下新建一個 vue.config.js 文件,拷貝如下代碼

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

特別注意:your api 就是請求後臺域名後的相同部分,我理解vue實現是key-value方式,此處如果是 “/test/api/”: { },那麼請求的時候 /test/api/getUserInfo,就是地址 target + /test/api/getUserInfo,若請求key對應不上則代理就會無效了。

原文鏈接

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章