1)总结问题
1)一个项目中有2+以上的url请求,原因是后台分模块化的,导致前端一个项目中会有不同的请求,比如登录是8001,里面其他的明细是8002
2)cordova 和 vue 集成打包apk后,无法访问后台的接口问题,可正常浏览器模拟是没有问题的,原因是vue的npm run build 命令,该命令打包的文件默认不是生成环境,所以在封装BASE_URL(统称后台地址)时,注意路径问题和vue3跨域以及在android里的AndroidManifest.xml 添加 android:hardwareAccelerated="true"
3)cordova 项目 和 vue的项目同层级
4)简单露出代码,如不懂可留言咨询,博主一定会回答
//vue3跨域
proxy: {
'/mes': {
target:'http://10.4.12.248:8000/mes',
ngeOrigin: true,
ws: true,
pathRewrite: {
'^/mes': ''
}
},
'/wms': {
target:'http://10.4.12.248:8001/wms',
ngeOrigin: true,
ws: true,
pathRewrite: {
'^/wms': ''
}
}
}
//cordova 结合 vue3 配置,跟vue项目同层级
publicPath:'./',
outputDir:'../cordovademo/www',
productionSourceMap:false,
//-----------------------------------------
//main.js 中 引入 cordova
import VueCordova from 'vue-cordova'
Vue.use(VueCordova)
// add cordova.js only if serving the app through file://
if (window.location.protocol === 'file:' || window.location.port === '8888') {
var cordovaScript = document.createElement('script')
cordovaScript.setAttribute('type', 'text/javascript')
cordovaScript.setAttribute('src', 'cordova.js')
document.body.appendChild(cordovaScript)
}
//测试的
Vue.cordova.on('deviceready', () => {
console.log('Cordova : device is ready !');
console.log('Vue.cordova :', Vue.cordova);
});
//2+ 以上的url地址请求封装 创建axiosInit.js 封装请求的地址 我的目录放在了src 下面的utils文件夹下
import axios from 'axios';
let mes_url='';
let wms_url='';
if (process.env.NODE_ENV === "development") {
//'/api'为vue.config.js中设置的proxy代理
mes_url='/mes';
wms_url='/wms';
}else {
mes_url='http://10.4.12.248:8000/mes';
wms_url='http://10.4.12.248:8001/wms'
}
const mes_req=axios.create({
baseURL:mes_url,
timeout:60000 //1m
});
const wms_req=axios.create({
baseURL:wms_url,
timeout:60000 //1m
});
//请求、响应拦截
/*mes_req.interceptors.request.use(function(req){
alert(req.url)
if(req.url.includes('127.0.0.1')||req.url.includes('localhost')){
alert(1)
}else{
alert(2)
}
return req;
});*/
/*wms_req.interceptors.request.use(function(req){
alert(wms_url)
alert(req.url)
return req;
});
*/
const service={
mes_req,wms_req
}
export default service;
//-----------------------------------------
//main.js 中引入
import axiosInit from './utils/axiosInit'
Vue.prototype.mes_req=axiosInit.mes_req;
Vue.prototype.wms_req=axiosInit.wms_req;
//-----------------------------------------
//实例请求 登录 和 其他明细
methods:{
async login(){
this.wms_req({
method:'post',
url:'/login',
data:{
userName:this.username,
passWord:this.password
}
}).then(res=>{
const {code,data,message} = res.data;
if(code==='200'){
this.$toast.success(message);
localStorage.setItem('token',data.token);
localStorage.setItem('user',data.userInfo);
//this.$router.push('/tabbarPage');
this.$router.push('/home');
}else{
this.$toast.fail(message)
}
}).catch(err=>{
alert(err);
}) ;
}
}
getAllWoTask(){
this.mes_req({
method:'post',
url:'/wo/list',
header:{
'Content-Type':'application/json' //如果写成contentType会报错
},
data: this.prams
}).then(res=>{
const {code,data} = res.data;
if(code==='200'){
console.log()
this.list=[...this.list,...data.list];
this.totalNum=this.totalNum+data.list.length;
//每一次加载完设置false,便于下次继续加载
this.loading=false;
this.refreshing = false;
this.isSearch=false;
//判断是否还有数据加载
if(data.length<this.prams.size){
this.finished=true;
}
}else{
this.$toast.fail(message)
}
});
}
结束了,你们还有什么问题?
希望此教程可以帮助到你们。❤❤❤
网友评论