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 相关文章推荐
jquery简单体验
Jan 10 Javascript
jquery 注意事项与常用语法小结
Jun 07 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 Javascript
jquery自定义显示消息数量
Dec 19 jQuery
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
JS实现可视化音频效果的实例代码
Jan 16 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 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将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
详解php比较操作符的安全问题
2015/12/03 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
python 实现表情识别
2020/11/21 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
如何利用python 读取配置文件
2021/01/06 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
公务员试用期满考核材料
2014/05/22 职场文书
法学自荐信
2014/06/20 职场文书
司机岗位职责
2015/02/04 职场文书
Python实现打乒乓小游戏
2021/09/25 Python