vue开发中api接口地址区分开发环境和线上环境

参考博文https://blog.csdn.net/qq_22844483/article/details/81662670
最近用vue开发项目,感觉手生,所以到处找资料,补充不足。
这里记录下关于接口的配置问题:
需要配置的文件:
/config/dev.env.js // 本地开发配置
/config/prod.env.js // 线上打包配置

在dev.env.js里面
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_ROOT: '"开发环境地址"'
})

在prod.env.js里面
'use strict'
module.exports = {
NODE_ENV: '"production"',
API_ROOT: '"线上地址"'
}

注意:本地开发会用到webpack的代理, 开发环境的api地址已经被代理了, 在/config/index.js里面的proxyTable, 所以线下地址不能写成你实际的线下地址, 而是要写成你这里代理后的地址,就是带有api的那种地址

代理处理跨域
在/config/index.js里的proxyTable, 现在最新的vue-cli不需要特意安装插件了 直接修改这个文件即可

proxyTable: {
'/apis': { //将www.exaple.com印射为/apis
target: 'https://www.exaple.com', // 接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/apis': '' //需要rewrite的,
}
}
}

使用方法
最好是把所有的请求都封装一下, 不管是为了以后修改还是其他什么
在请求之前拼接地址
const root = process.env.API_ROOT;
这个root就是对应的地址、
npm run dev
开发环境会使用dev.env.js里的API_ROOT
npm run build
线上环境会使用prod.env.js里的API_ROOT
在每个请求的地方
root+'/getlist'
如果没有封装的话, 则需在每个***.vue文件内
const root = process.env.API_ROOT;
然后使用root+'/getlist'

注意:每次配置完成后要重启下项目,这样才能看到是否生效

可以在入口vue文件内log一下测试
const root = process.env.API_ROOT;
// 然后在created(){}, 这个函数内打印一下root 如果是你设置的 就说明设置成功

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复