vue-cli3跨域设置

项目根目录下，新建两个文件，分别为：“.env.development”和“.env.production”，对应内容如下：

# .env.development
# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = 'http://localhost:8833'
# 原内容：VUE_APP_BASE_API = '/dev-api'

VUE_CLI_BABEL_TRANSPILE_MODULES = true

# .env.production
# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = 'https://www.zjoss.com'
# 原内容：VUE_APP_BASE_API = '/prod-api'

'use strict'

// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    port: 80,
    open: true,
    overlay: {
      warnings: true,
      errors: true
    },
    proxy: {
      '/': {
        // .env.development 设计期 .env.production 生产期
        target: process.env.VUE_APP_BASE_API,
        changeOrigin: true, // 允许跨域
        pathRewrite: { // 代理
          '^/': ''
        }
      }
    }
  }
}

以上配置，就是通过代理，将请求地址 / 指向 http://localhost8833 ，设计期和生产期会自动切换定义的地址。

比如请求 /www/test.api 会代理成 http://localhost:8833/www/test.api，示例页面代码如下：

<template>
  <div>
    <h1>{{ msg }}</h1>
    <button type="primary" @click="test">测试</button>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  methods: {
    test() {
      // console.log(process.env.VUE_APP_BASE_API)
      axios({
        method: "get",
        url: "/www/test.api",
        // 防止ie缓存get请求
        params: "ie-" + +new Date() + ((Math.random() * 1000).toFixed(0) + "")
      })
        .then(function(resp) {
          console.log(resp.data);
        })
        .catch(resp => {
          console.log(resp);
        });
    }
  }
};
</script>

是不是感觉比vue-cli2简单一些？