VueCli2,前后端分离时,前端开发如何访问后端的API接口
前端开发:
- VueCli2项目结构
配置Config下的index.js,配置后就可以跨域访问后台api了
dev: {
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/apis/': {
target: "http://127.0.0.1:3000",
changeOrigin: true,
pathRewrite: {
'^/apis': ''
}
}
}
- 开发环境 与 生产环境
在开发时,需要跨域访问后台的接口,但是开发完上线时,则不需要,于是可以配置Config下的dev.env和prod.env
- dev.env.js 配置
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
APIS_HOST: '"/apis'
})
- prod.env.js 配置
module.exports = {
NODE_ENV: '"production"',
APIS_HOST: '""'
}
- 跨域时: 这里使用的axios跨域
- 配置axios
npm install --save axios
npm install --save vue-axios
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
- 完成跨域
function verifyCodeReq() {
return new Promise((resolve, reject) => {
Vue.axios
.get(process.env.APIS_HOST + "/member/verifyCode", {
params: {}
})
.then(res => {
resolve(typeof(res));
})
.catch(err => {
reject(err);
})
})
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)