vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作


Posted in Javascript onSeptember 12, 2020

Vue项目通过Hbuild打包为APP后,静态文件正常显示,但并没有像开发时那样请求到数据。

这是为什么?因为APP并没有跨域,不存在跨域一说。

我们在开发的时候,js在不同的域之间进行数据传输或通信,所以会给项目设置代理来跨域

config下的index.js

比如这个

proxyTable: {
 '/api':{
  target: 'http://XXX/xxx/v3',
  changeOrigin: true,
  pathRewrite: {
   '^/api': ''
  }
 }
}

在开发时这样做是没错的,但我们在打包时就不用设置这个跨域了,打包前直接将这个跨域注释掉,然后将API请求地址改为绝对地址。例如这样

let SwipeImg = () => axios({
 // url: 'api/basic/advert/lists',
 url: 'http://xxx.xxx.xx.xx/api/v3/basic/advert/lists',
 params: {
  auth_key: key
 }
})

改好之后在通过Hbuild打包后,APP数据就显示正常了

这里要注意的是,我将打包后的APP放在夜神模拟器里,数据显示还是不正常,但放在自己手机里就显示正常,这点要注意

补充知识:vue 项目打包后看不到页面内容

vue 项目打包命令是:

npm run build

如果打包后打开index.html页面看不到内容,有可能就是路径不对,需要修改config/index.js文件

如下:

build: {
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),

  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './',//此处为修改的地方,这里加. 
..........
}

以上这篇vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript面象对象设计
Apr 28 Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
vue fetch中的.then()的正确使用方法
Apr 17 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 Javascript
vue v-on:click传递动态参数的步骤
Sep 11 #Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 #Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 #Javascript
请求时token过期自动刷新token操作
Sep 11 #Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 #Javascript
Vue axios获取token临时令牌封装案例
Sep 11 #Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 #Javascript
You might like
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
PHP+MySql+jQuery实现的"顶"和"踩"投票功能
2016/05/21 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
兼容ie和firefox js关闭代码
2008/12/11 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
详解Node.js access_token的获取、存储及更新
2017/06/20 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
python三大神器之fabric使用教程
2019/06/10 Python
django基础学习之send_mail功能
2019/08/07 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
python中count函数简单的实例讲解
2020/02/06 Python
python实现低通滤波器代码
2020/02/26 Python
如何通过python计算圆周率PI
2020/11/11 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
智能室内花园:Click & Grow
2021/01/29 全球购物
sort命令的作用和用法
2013/08/25 面试题
自学考试自我鉴定范文
2013/09/26 职场文书
秘书英文求职信
2014/04/16 职场文书
征兵宣传标语
2014/06/20 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
2014年防汛工作总结
2014/12/08 职场文书
教你用python控制安卓手机
2021/05/13 Python
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python
Python循环之while无限迭代
2022/04/30 Python