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 相关文章推荐
js控制框架刷新
Aug 01 Javascript
读jQuery之六 缓存数据功能介绍
Jun 21 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
jQuery中$.ajax()方法参数解析
Oct 22 Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 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
配置最新的PHP加MYSQL服务器
2006/10/09 PHP
PHP similar_text 字符串的相似性比较函数
2010/05/26 PHP
php数组合并的二种方法
2014/03/21 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
微信小程序 支付后台java实现实例
2017/05/09 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
Python中unittest用法实例
2014/09/25 Python
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
python if not in 多条件判断代码
2016/09/21 Python
python复制文件到指定目录的实例
2018/04/27 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
python版百度语音识别功能
2019/07/09 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
python之列表推导式的用法
2019/11/29 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
Servlet的生命周期
2013/08/25 面试题
小学教师办公室制度
2014/02/03 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
北京故宫的导游词
2015/01/31 职场文书
通知的写法
2015/04/23 职场文书
感动中国何玥观后感
2015/06/02 职场文书
一年级语文教学随笔
2015/08/14 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL