【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 启动项目 才能生效，特别坑爹，之前改了半天就是不生效；