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