Comments (22)
其实wifi同步时采用的是增量同步,只是apicloud的wifi同步是对比文件的生成时间,而webpack在编译时会将遍历所有vue后重新生成html,即便vue没有改动过,那么wifi同步时就会相关html都会被再同步一次,我想想办法,看看能否避免这个问题
from avvw.
是的,命令里确实是设置了增量更新参数。
我抓包的时候发现同步其实也是App Loader从本地服务器里拉取文件,我们浏览器调试时也是会开启一个服务器,如果让App Loader和这个服务器通信会不会达到这样的效果呢?由于浏览器调试时编译出来的dist目录是放在内存中的,我无法拿到,尚不知可行性如何。
还有一个方法就是修改apicloud-cli中文件对比的代码了。
APICloud Studio 2中真机WiFi同步时,可以实现改动一个文件同步一个文件的功能,可以从这里找找如何实现这个功能。
框架很好用,谢谢作者付出的心血!
from avvw.
我刚刚看了下,webpack dev server时是可以将文件写入硬盘,而不是内存,那么可以尝试实现监听文件变动时自动进行wifi同步,这样应该就能实现增量更新了,等我改好后通知你
from avvw.
请问是通过改这个参数实现吗?
from avvw.
我现在采取的方式是webpack dev server后,再通过APP Loader同步一个可以打开指定网页的页面过去,然后通过这个页面打开本地服务器的页面,变相地实现了热刷新。
只是不方便的是浏览器会自动刷新页面,但是APP Loader不会,需要通过Chrome Inspect手动刷新一下页面。
from avvw.
@amnextking 改writetodisk这个参数
from avvw.
@amnextking 已实现手机热加载并更新版本,详细请看README
手机热加载原理是通过Apploader访问本地测试服,所以这个Issue你可以测试下是否已可远程调试,我还没时间测试,谢谢!
from avvw.
已经更新该版本,谢谢作者。
另有个小建议,在v1.2.0中使用npm run dev时不会自动打开浏览器,但如果还是要用浏览器看效果的话,默认会打开http://0.0.0.0:8080/。
所以建议在devServer中加入useLocalIp: true,
参数保证浏览器打开时能正常访问本机IP,减少手动输入IP的步骤。
from avvw.
浏览器用http://localhost:8080 、http://0.0.0.0:8080、http://127.0.0.1:8080、http://本地IP:8080 均可以打开测试页面的,npm run dev 的启动参数只需加 --open 即可默认打开浏览器
from avvw.
我测试的时候http://0.0.0.0:8080无法打开页面,故找到了这么个参数。
之前我是在npm run dev 的启动参数使用--open-page默认打开指定导航页的。
from avvw.
from avvw.
@amnextking 已实现手机热加载并更新版本,详细请看README
手机热加载原理是通过Apploader访问本地测试服,所以这个Issue你可以测试下是否已可远程调试,我还没时间测试,谢谢!
我提这个Issue #12 时,采取的方式是新建了个APICloud项目专门用于打开指定浏览器页面的,但那时候我测试还是没办法调试的。
from avvw.
@amnextking 已实现手机热加载并更新版本,详细请看README
手机热加载原理是通过Apploader访问本地测试服,所以这个Issue你可以测试下是否已可远程调试,我还没时间测试,谢谢!
我提这个Issue #12 时,采取的方式是新建了个APICloud项目专门用于打开指定浏览器页面的,但那时候我测试还是没办法调试的。
好的,我这边测试下
from avvw.
我可以在devServer中加入useLocalIp: true,host: '0.0.0.0'是允许外网访问你的本地测试服
from avvw.
配置如下,除加了个单文件预览的命令及使用本机IP的参数,没有做其他修改,也可能是我本身电脑配置的问题。
package.json:
"scripts": {
"wifi-start": "apicloud wifiStart --port 23456",
"wifi-stop": "apicloud wifiStop --port 23456",
"wifi-preview": "webpack --config webpack.prod.js && apicloud wifiPreview --port 23456 --file",
"wifi-dev": "apicloud wifiSync --project ./ --updateAll false --port 23456",
"wifi-build": "webpack --config webpack.prod.js && apicloud wifiSync --project ./ --updateAll false --port 23456",
"wifi-log": "apicloud wifiLog --port 23456",
"support": "browserslist",
"dev": "webpack-dev-server --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
},
webpack.dev.js:
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
host: '0.0.0.0',
disableHostCheck: true,
writeToDisk: file => {
return /index.html$/.test(file)
},
useLocalIp: true,
hot: true
},
from avvw.
那就在下版本加入 useLocalIp,可能我用的linux系统没有对IP做限制
from avvw.
我更新到V1.2.0之后,修改某一页面的代码,热重载时会报错:
Uncaught RangeError: Maximum call stack size exceeded at runtime.js : 57
from avvw.
Uncaught RangeError: Maximum call stack size exceeded at runtime.js : 57
出现这个错误一般是webpack动态编译时内存溢出导致的(例如死循环,内存不足),你试下将修改的代码还原看看,检查那段代码是否有错误,同时可以看看runtime.js 57行是运行什么
from avvw.
runtime.js:
/******/ var parentHotUpdateCallback = window["webpackHotUpdate"];
/******/ window["webpackHotUpdate"] = // eslint-disable-next-line no-unused-vars
/******/ function webpackHotUpdateCallback(chunkId, moreModules) {
/******/ hotAddUpdateChunk(chunkId, moreModules);
/******/ if (parentHotUpdateCallback) parentHotUpdateCallback(chunkId, moreModules);
/******/ } ;
我在任意页面修改代码都会这样。
from avvw.
排查到问题了,是devServer的hot属性与HotModuleReplacementPlugin冲突了。
from avvw.
排查到问题了,是devServer的hot属性与HotModuleReplacementPlugin冲突了。
这会冲突?最后怎么解决?我这边还没发现这个问题,hot属性和HotModuleReplacementPlugin都要使能,是官方配置的
from avvw.
我将webpack.dev.js中的代码修改如下,注释了重新npm run dev就不会报这个错。
plugins: [
new HotModuleReplacementPlugin(),
new CopyWebpackPlugin([{ from: './src/templates/vue.js', to: './js' }]),
// new HotModuleReplacementPlugin(),
...htmlWebpacks
]
因为我有加支持子目录的代码在这里,我也测试了把支持子目录的代码删除还是会报错。
from avvw.
Related Issues (20)
- page 目录 和 dist目录 添加 新建目录功能 引发的问题 HOT 1
- 使用 手机实时调试 提示 [WDS] Disconnected! HOT 6
- pages文件多编译卡 HOT 1
- 第一次启动页面,会等一会儿才加载问题 HOT 1
- 有QQ群或者微信群吗? HOT 4
- 总感觉本地加载速度很慢,生产环境会好一些吗? HOT 1
- popup组件问题 HOT 3
- vue组件调用问题 HOT 3
- 关于组件调用$attrs is readonly. $listeners is readonly. HOT 1
- 这框架很棒啊 HOT 1
- 框架为啥不用axios啊 HOT 1
- 代码结构有点乱 HOT 1
- 这个项目挺好的,还有维护吗,npm i 报错 HOT 2
- 请问 如何给全局引入一个样式 HOT 2
- 关于头部传参的问题 HOT 1
- 打包后的widget上传后怎么生效的 HOT 3
- 依赖package.json "core-js": "^3.3.2", 这个依赖没有用到
- 请问下配合webpack使用后还能使用官方module store里的模块吗
- 真机同步时显示404 Not found HOT 2
- 国际化无法实现 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from avvw.