Vue专题（四）请求数据跨域代理配置

1. Axios基础用法

文档：https://www.npmjs.com/package/axios

2. 引用Axios

        Vue网络请求使用Axios，首先需要安装axios

npm install axios -s

 3. Axios 在vue中的使用

import axios from 'axios'
export default {
  name: 'TabForm',
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      axios.post(
        'http://localhost:89/formDef/query',
        {
          params: {
            taskID: 'Activity_1o3t03u'
          }
        }
      ).then(res => {
        console.log(res)
      }).catch(errMsg => {
        console.log(errMsg)
      })
    }
  }
}

         如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

4. 跨域代理

         前景：通过vue-cli3 创建的vue项目没有vue.config.js；为满足一些特殊需求，需要手动创建vue.config.js文件

4.1 创建vue.config.js

        vue.config.js是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

        在根目录创建 vue.config.js

module.exports = {
  publicPath: './', //  部署应用包时的基本 URL, ('./')相对路径，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。
  outputDir: 'dist', // 输出文件目录
  assetsDir: 'static', // 放置生成的静态资源 (js、css、img、fonts) 的目录。
  lintOnSave: process.env.NODE_ENV === 'development', // 是否在保存的时候使用 `eslint-loader` 进行检查。 有效的值：`ture` | `false` | `"error"`  当设置为 `"error"` 时，检查出的错误会触发编译失败。
  productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  filenameHashing: true, // 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而，这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML，你可以通过将这个选项设为 false 来关闭文件名哈希。
  configureWebpack: { // Webpack相关配置 - 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },
  css: {
    extract: false // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
  },
  chainWebpack(config) { // 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
    config.plugin('preload').tap(() => [
      {
        rel: 'preload',
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: 'initial'
      }
    ])
    config.plugins.delete('prefetch')
    config.module.rule('svg').exclude.add(resolve('src/icons')).end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
    config.when(process.env.NODE_ENV !== 'development', (config) => {
      config
        .plugin('ScriptExtHtmlWebpackPlugin')
        .after('html')
        .use('script-ext-html-webpack-plugin', [
          {
            inline: /runtime\..*\.js$/
          }
        ])
        .end()
      config.optimization.splitChunks({
        chunks: 'all',
        cacheGroups: {
          libs: {
            name: 'chunk-libs',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial'
          },
          elementUI: {
            name: 'chunk-elementUI', // 将elementUI单独拆分一个包
            priority: 20,
            test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // 兼容cnpm
          },
          commons: {
            name: 'chunk-commons',
            test: resolve('src/components'), // 设置自定义组件
            minChunks: 3,
            priority: 5,
            reuseExistingChunk: true
          }
        }
      })
      config.optimization.runtimeChunk('single')
    })
  },
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: false
    },
    proxy: { // 如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
      '/YinChuanYingJi': {
        target: 'http://192.168.1.105:8083',
        changeOrigin: true,
        pathRewrite: {
          '^/YinChuanYingJi': '/YinChuanYingJi'
        }
      }
    }
  }
}

 以上配置按需引用，常见的配置项都已经写出，其他特殊可参考Vue-cli 官方文档