开发环境下vue-admin-template如何配置调用后端api
在vue-admin-template框架下涉及的文件有:vue.config.js
src/utils/request.js
.env.development
// vue.config.js
// ...
module.exports = {
/**
* You will need to set publicPath if you plan to deploy your site under a sub path,
* for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
* then publicPath should be set to "/bar/".
* In most cases please use '/' !!!
* Detail: https://cli.vuejs.org/config/#publicpath
*/
publicPath: '/',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: 'http://www.you-api.com:8769',
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: '',
},
},
},
// before: require('./mock/mock-server.js')
},
// ...
}
.env.development
# just a flag
ENV = 'development'
# base api
VUE_APP_BASE_API = '/dev-api'
# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
# It only does one thing by converting all import() to require().
# This configuration can significantly increase the speed of hot updates,
# when you have a large number of pages.
# Detail: https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
VUE_CLI_BABEL_TRANSPILE_MODULES = true
// request.js
// 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
})
如何定义一个api请求服务
// user.js
import request from '@/utils/request'
import { getSessionStorage } from '@/utils'
export function getInfo(params) {
return request({
url: '/user/selectById',
method: 'post',
data,
})
}
export function update(params) {
return request({
url: '/user/update',
method: 'post',
data:params
})
}
如何使用api请求
import { getInfo } from ''user.js'
const params = { id: 123}
getInfo(params).then(res=>{
console.log(res)
}).catch(e=>{
console.log(e)
})