安装
git clone https://gitee.com/panjiachen/vue-element-admin.git client
cd client
git branch -a
git checkout -b i18n remotes/origin/i18n
git config --global url."https://".insteadOf git://
npm install
npm run dev
-
需要切换分支到 i18n,否则不支持国际化(中文)功能
-
npm install 要多试几次,因为中间会连接 gitbub 下载一些依赖,网络不稳定会导致失败
-
npm run dev 运行后回自动打开浏览器,使用的端口是 9527
后端路径
开发环境下执行下面命令
npm run dev
-
会同时启动 mock-server
在开发环境下,后端访问路径起始路径配置在文件 .env.development
中
VUE_APP_BASE_API = '/dev-api'
-
默认向后台的请求都发给
http://localhost:9527/dev-api
的 mock-server,获得的都是模拟数据 -
需要跟真实后台联调时,可以改动以上地址为
VUE_APP_BASE_API = 'http://localhost:8080/api'
;或者改为VUE_APP_BASE_API = '/api'
,然后在 vue.config.js 中添加代理: -
注释掉:before: require('./mock/mock-server.js')
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
},
// before: require('./mock/mock-server.js') 记得注释掉这一行代码
}
发送请求的 axios 工具被封装在 src/utils/request.js 中
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
// ...
原有代码的 URI 路径都是这样的:
/vue-element-admin/user/login
/vue-element-admin/user/info
/vue-element-admin/user/logout
...
如果觉得不爽,可以来一个全局替换
/user/login
/user/info
/user/logout
...
token 的请求头修改一下,在 src/utils/request.js 中
...
service.interceptors.request.use(
config => {
// do something before request is sent
if (store.getters.token) {
// let each request carry token
// ['X-Token'] is a custom headers key
// please modify it according to the actual situation
config.headers['Authorization'] = getToken() //将['X-Token']替换为['Authorization']
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
...
修改 token 保存位置
这里对 token 存储进行了修改,原框架中的 token 既存储在 cookie 中,又存储在了 store.state 中中,这样对代码维护造成了困难,每次修改 token 都要修改两个地方
由于 token 没有响应式的需求,所以将 token 统一存储在 cookie 中,而 vuex 中相关 SET_TOKEN 的代码都注释掉
这样每次读取和设置 token 都从 @/utils/auth 中的方法来操作 cookie 即可
const state = {
// token: getToken(),
...
}
const mutations = {
// SET_TOKEN: (state, token) => {
// state.token = token
// },
...
}
接下来需要将所有用到 vuex 中 token 的代码都注释掉:
- 全局搜索 SET_TOKEN ,将相关代码注释掉
- 全局搜索 state.token ,将相关代码注释掉
- 全局搜索 user.token ,将相关代码注释掉
- 全局搜索 getters.token ,将相关代码注释掉
以后要修改/获取 token 只需导入 @/utils/auth 中的方法即可:
export function getToken() {
return Cookies.get(TokenKey)
}
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
}