【Abp VNext】實戰入門（五）：【1】前端管理界面 vue-element-admin —— API基礎接口路徑BaseUrl配置

一、前言：

vue-element-admin 是一個背景前端解決方案，它基于 vue 和 element-ui實作。它使用了最新的前端技術棧，内置了 i18 國際化解決方案，動态路由，權限驗證，提煉了典型的業務模型，提供了豐富的功能元件，它可以幫助你快速搭建企業級中背景産品原型。相信不管你的需求是什麼，本項目都能幫助到你。

由于Vue-Element-Admin 預設源代碼功能太多，對于初學者學習不友好，項目正式搭建的時候也比較繁瑣，是以采用 實際上采用的是 基礎模闆項目：Vue-Admin-Template

vue-element-admin 官網位址：https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/

二、準備Vue-Admin-Template基礎子產品：

1、克隆項目：

# 克隆項目
git clone https://github.com/PanJiaChen/vue-admin-template.git

# 進入項目目錄
cd vue-admin-template

# 安裝依賴
npm install

# 建議不要用 cnpm 安裝 會有各種詭異的bug 可以通過如下操作解決 npm 下載下傳速度慢的問題
npm install --registry=https://registry.npm.taobao.org

# 本地開發 啟動項目
npm run dev
           

2、根目錄檔案配置接口基礎路徑：檔案：.env.development

ENV = 'development'

# base api
VUE_APP_BASE_API = 'https://localhost:44349/'
           

3、根目錄Config配置檔案更改：檔案：vue.config.js

devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    //1、新增 proxy節點
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: process.env.VUE_APP_BASE_API,
        changeOrigin: true, // 配置跨域
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    }
    //2、注釋掉此行 
    // before: require('./mock/mock-server.js')  
  }
           

4、啟動項目：npm run dev 

1、單擊登入按鈕，對應的登入接口位址變成了  https://localhost:44349/vue-admin-template/user/login；

2、https://localhost:44349/：接口基礎路徑 是在.env.development 檔案中配置的；

3、vue-admin-template/user/login：相對路徑  是在 src/api/user.js 的login方法中配置的；

三、總結：

關于.env.development、vue.config.js 這一類配置檔案 更改後 需要 Ctrl+C 停止項目 然後重新 npm run dev 啟動項目 才能生效，特别坑爹，之前改了半天就是不生效；