vue2.0配置代理 api 开发环境、生产环境

业务场景：只需内网调用接口，不需要ngix，所以生产环境没有跨域问题不用api代理，但是本地环境有跨域问题要做代理。
实现需求：本地环境有api，生产环境没有api

以下是实现方法：

1、 config/index.js

'use strict'
const path = require('path')
module.exports = {dev: {// PathsassetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {'/api/**': {//设置你调用的接口域名和端口号 别忘了加httptarget: 'http://192.168.1.159:60080',//  target: 'http://192.168.1.162:60080',changeOrigin: true,pathRewrite: {'^/api': '' //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可}},'/api2/**': {target: 'http://139.159.185.67:9208',  //changeOrigin: true,pathRewrite: {'^/api2': '' //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可}}},// Various Dev Server settingshost: '0.0.0.0', // can be overwritten by process.env.HOSTport: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determinedautoOpenBrowser: false,errorOverlay: true,notifyOnErrors: true,poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-/*** Source Maps*/devtool: 'cheap-module-eval-source-map',cacheBusting: true,cssSourceMap: true},build: {// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: '/',/*** Source Maps*/productionSourceMap: false,devtool: '#source-map',productionGzip: false,productionGzipExtensions: ['js', 'css'],bundleAnalyzerReport: process.env.npm_config_report}
}

2、开发环境 config/dev.env.js

保留/api

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')module.exports = merge(prodEnv, {NODE_ENV: '"development"',API_ROOT:'"/api"'
})

3、生产环境config/prod.env.js

去掉api，只要/

'use strict'
module.exports = {NODE_ENV: '"production"',API_ROOT: '"/"'
}

4、请求时拼接前缀

// 创建axios实例
const service = axios.create({baseURL: process.env.API_ROOT, // api的base_urltimeout: 15000 // 请求超时时间
})

vue2.0配置代理 api 开发环境、生产环境相关推荐

ionic app 开发和生产环境的配置
前言像 Angular2 一样,希望 ionic 可以提供 2 个文件 ( environment.dev.ts 和 environment.prod.ts ),其中包含与开发和生产环境相对应的不同 ...
开发测试服务器配置信息,node服务端中台实现及开发测试生产环境配置
本人node服务端新人一枚,网上找了不少资料,看了很多别人的配置信息,感觉都不是很合适,看的多了自己也明白配置的具体思路跟实现方式了,以下为我的实现方式.通过package.json里面的script ...
Vue2.0配置mint-ui踩过的那些坑
Vue2.0配置mint-ui踩过的那些坑最近开发项目的时候逐渐采用vue.js+mint-ui的技术栈,但是昨天开始配置开发环境的时候,遇到了各种报错,即使是按照两家的官方文档配置,也还是会报错, ...
极光推送环境区分php,JPush Android 推送如何区分开发、生产环境
我们 Android 开发者在使用极光推送时可能会发现,在通过官方控制台进行推送时.只有 iOS 区分了开发和生产环境,而 Android 则没有.但实际开发中又确实经常需要针对开发和生产环境分别来推 ...
在package.json里面的script设置环境变量，区分开发及生产环境。注意mac与windows的设置方式不一样...
在package.json里面的script设置环境变量,区分开发及生产环境. 注意mac与windows的设置方式不一样. "scripts": {"publish-m ...
Computer：计算机测试理论(开发/测试/上线)之DEV、SIT、UAT、PRD四套环境(测试环境/开发环境/生产环境)详细介绍之详细攻略
Computer:计算机测试理论(开发/测试/上线)之DEV.SIT.UAT.PRD四套环境(测试环境/开发环境/生产环境)详细介绍之详细攻略目录测试理论 1.DEV.SIT.UAT.PRD四套环 ...
git（gitlab）子模块功能在团队协同开发和生产环境中的应用（git,gitlab,TortoiseGit,CI/CD,Jenkins,docker-compose,分支合并,开发环境,测试环境）
git(gitlab)子模块功能在团队协同开发和生产环境中的应用目录 git(gitlab)子模块功能在团队协同开发和生产环境中的应用一.前言二.先决条件三.创建gitlab项目(项目管理员操 ...
vue--echarts 图标库、excel导出、面包屑组件、富文本框、地图、前端使用代理访问、监控生产环境or开发环境
目录一.echarts 图标库 1.echarts的基础 2.项目中的使用二.execl导出三.面包屑组件四.富文本框五.地图六.vite 构建配置七.后端未开跨域资源共享,前端使用代理 ...
vue服务端渲染——项目搭建、开发、生产环境的部署、浏览渲染、SEO优化
几个月前,公司要求(服务端渲染)--用vue-ssr做了个服务端渲染,从起搭建.开发.部署.浏览器渲染到优化,希望对有需要的小伙伴有帮助,若是有不足之处,望指出,一起讨论学习.--几个月过去了,公司又 ...

vue2.0配置代理 api 开发环境、生产环境

以下是实现方法：

1、 config/index.js

2、开发环境 config/dev.env.js

3、生产环境config/prod.env.js

4、请求时拼接前缀

vue2.0配置代理 api 开发环境、生产环境相关推荐

最新文章

热门文章

vue2.0配置代理 api 开发环境、生产环境

以下是实现方法：

1、 config/index.js

2、开发环境 config/dev.env.js

3、生产环境config/prod.env.js

4、 请求时拼接前缀

vue2.0配置代理 api 开发环境、生产环境相关推荐

最新文章

热门文章

4、请求时拼接前缀