vue跨域处理（vue项目中baseUrl设置问题）

一、方法一

在公用文件common.js中设置baseUrl

export var baseUrl = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : '/api'

该方法的优点：在项目打包时，static下面的文件是不会被webpack处理的，所以可以通过改变static下config.js中的值，更改服务器地址。

在main.js中设置全局的axios配置

import axios from 'axios'
import {baseUrl} from '@/assets/js/common.js'

axios.defaults.baseURL= baseUrl

在api_message.js中声名调用接口的方法

import qs from 'qs'

export function messagelist (params = {}) {
  return axios.post('/event/list.do', qs.stringify(params))
}

注意：此处引入qs的原因

axios默认是 json 格式提交,确认后台是否做了对应的支持;若是只能接受传统的表单序列化,就需要自己写一个转义的方法，或者用qs依赖。

组件中调用

import {messagelist} from '@/assets/js/api_message.js'

export default {
  name: 'ShopList',
  components: { Item },
  data() {
    return {
      list: []
    }
  },
  methods: {
    getList() {
      let listdata = {
        limit: 8,
        offset: 0,
        statueType: this.statueType,
        condition: this.condition
      }
      messagelist(listdata).then(response => {
        if (response.data.length > 0) {
          this.list = response.data
        }
      }).catch(error => {
        console.debug(error)
      })
    }
  }
}

二、方法二：

开发环境：

 

生产环境：

在单个js中声名接口

import axios from 'axios'
import qs from 'qs'
const instance = axios.create({
  baseURL: baseUrl
})
export function login (params = {}) {
  return instance.post('/duty/login', qs.stringify(params))
}

注意：在有的编辑器中，会报baseUrl未声名，但是不影响使用
 

三、方法三

开发环境

生产环境

在文件中使用

import axios from 'axios'
import qs from 'qs'
const instance = axios.create({
  baseURL: process.env.API
})