目录
虽然接口数据很正常被获取,但是接口地址还是不想暴露出去,欸?!那咋办,这就是说到了今天说的内容了,大家看我写的标题应该也能明白,⅖ 种方法—— 前边的三种方法已经说了,这里再重温下:
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
关键字:

