开发环境下vue-admin-template如何配置调用后端api

开发环境下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)
})