目录

•  

  虽然接口数据很正常被获取，但是接口地址还是不想暴露出去，欸？！那咋办，这就是说到了今天说的内容了，大家看我写的标题应该也能明白，⅖ 种方法—— 前边的三种方法已经说了，这里再重温下：

  0、不跨域 —— 前后端写在一起，别笑，还真的有人已经把Vue 和 .net 整合到一起了，不说明

  1、JsonP —— 在JQ中挺好，弊端也有，浅尝辄止

  2、添加请求头 —— 需要后端来设计，不推荐

  3、CORS —— 这个是我在跨域中遇到的神器，优缺点上边也说了，还是很不错的，推荐使用

  4、webpack 本地代理 —— dev 环境的一大神器，只需在 webpack 中三行配置，即可代理到本地，只能在本地，大弊端，不过仍推荐使用

  5、Nginx 反向代理 —— 完美解决 Build 后生产环境中的跨域问题，配合以后的负载均衡，强烈推荐

  因为前三种跨域方法，已经在之前的文章中提到了《

   

  一、基于webpack 的 proxy 代理——开发环境很方便

  1、Vue-Cli 3.0 新增全局配置文件 vue.config.js

   vue项目搭建的时候，会有一个全局config配置文件，在 vue-cli 2.0 脚手架中，很明显的把它放到了 config 的一个文件夹中，是这样的，我们在 index.js 中可以端口号的配置，打包之后路径的配置，图片的配置 等等

  

  但是 vue-cli 3.0 脚手架中，去掉了 config 这个文件夹，那我们如何配置呢，我们可以在项目根目录新建一个 vue.config.js 文件，像之前的很多繁琐配置，都可以在这个文件里配置啦。官方说明，vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

   我们就在根目录下新建该文件，然后添加内容：

  

  module.exports = {   // 基本路径  baseUrl: "/",   // 输出文件目录  outputDir: "dist",   // eslint-loader 是否在保存的时候检查  lintOnSave: true,   // webpack配置   // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md  chainWebpack: () => {},   configureWebpack: () => {},   // 生产环境是否生成 sourceMap 文件  productionSourceMap: true,   // css相关配置  css: {     // 是否使用css分离插件 ExtractTextPlugin    extract: true,     // 开启 CSS source maps?    sourceMap: false,     // css预设器配置项    loaderOptions: {},     // 启用 CSS modules for all css / pre-processor files.    modules: false   },   // use thread-loader for babel & TS in production build   // enabled by default if the machine has more than 1 cores  parallel: require("os").cpus().length > 1,   // PWA 插件相关配置   // see 
                          
  关键字：