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

你可能感兴趣的:(Abp,Vnext,web前端,AbpVnext,前端框架)