Giter VIP home page Giter VIP logo

Comments (22)

grapewheel avatar grapewheel commented on July 28, 2024

其实wifi同步时采用的是增量同步,只是apicloud的wifi同步是对比文件的生成时间,而webpack在编译时会将遍历所有vue后重新生成html,即便vue没有改动过,那么wifi同步时就会相关html都会被再同步一次,我想想办法,看看能否避免这个问题

from avvw.

amnextking avatar amnextking commented on July 28, 2024

是的,命令里确实是设置了增量更新参数。
我抓包的时候发现同步其实也是App Loader从本地服务器里拉取文件,我们浏览器调试时也是会开启一个服务器,如果让App Loader和这个服务器通信会不会达到这样的效果呢?由于浏览器调试时编译出来的dist目录是放在内存中的,我无法拿到,尚不知可行性如何。
还有一个方法就是修改apicloud-cli中文件对比的代码了。
APICloud Studio 2中真机WiFi同步时,可以实现改动一个文件同步一个文件的功能,可以从这里找找如何实现这个功能。
框架很好用,谢谢作者付出的心血!

from avvw.

grapewheel avatar grapewheel commented on July 28, 2024

我刚刚看了下,webpack dev server时是可以将文件写入硬盘,而不是内存,那么可以尝试实现监听文件变动时自动进行wifi同步,这样应该就能实现增量更新了,等我改好后通知你

from avvw.

amnextking avatar amnextking commented on July 28, 2024

请问是通过改这个参数实现吗?

from avvw.

amnextking avatar amnextking commented on July 28, 2024

我现在采取的方式是webpack dev server后,再通过APP Loader同步一个可以打开指定网页的页面过去,然后通过这个页面打开本地服务器的页面,变相地实现了热刷新。
只是不方便的是浏览器会自动刷新页面,但是APP Loader不会,需要通过Chrome Inspect手动刷新一下页面。

from avvw.

grapewheel avatar grapewheel commented on July 28, 2024

@amnextkingwritetodisk这个参数

from avvw.

grapewheel avatar grapewheel commented on July 28, 2024

@amnextking 已实现手机热加载并更新版本,详细请看README

手机热加载原理是通过Apploader访问本地测试服,所以这个Issue你可以测试下是否已可远程调试,我还没时间测试,谢谢!

from avvw.

amnextking avatar amnextking commented on July 28, 2024

已经更新该版本,谢谢作者。
另有个小建议,在v1.2.0中使用npm run dev时不会自动打开浏览器,但如果还是要用浏览器看效果的话,默认会打开http://0.0.0.0:8080/。
所以建议在devServer中加入useLocalIp: true,参数保证浏览器打开时能正常访问本机IP,减少手动输入IP的步骤。

from avvw.

grapewheel avatar grapewheel commented on July 28, 2024

浏览器用http://localhost:8080http://0.0.0.0:8080、http://127.0.0.1:8080、http://本地IP:8080 均可以打开测试页面的,npm run dev 的启动参数只需加 --open 即可默认打开浏览器

from avvw.

amnextking avatar amnextking commented on July 28, 2024

我测试的时候http://0.0.0.0:8080无法打开页面,故找到了这么个参数。
image
之前我是在npm run dev 的启动参数使用--open-page默认打开指定导航页的。

from avvw.

grapewheel avatar grapewheel commented on July 28, 2024

是不是有些配置你修改过?我这边是可以的
深度截图_选择区域_20190513100053
深度截图_选择区域_20190513100201

from avvw.

amnextking avatar amnextking commented on July 28, 2024

@amnextking 已实现手机热加载并更新版本,详细请看README

手机热加载原理是通过Apploader访问本地测试服,所以这个Issue你可以测试下是否已可远程调试,我还没时间测试,谢谢!

我提这个Issue #12 时,采取的方式是新建了个APICloud项目专门用于打开指定浏览器页面的,但那时候我测试还是没办法调试的。

from avvw.

grapewheel avatar grapewheel commented on July 28, 2024

@amnextking 已实现手机热加载并更新版本,详细请看README

手机热加载原理是通过Apploader访问本地测试服,所以这个Issue你可以测试下是否已可远程调试,我还没时间测试,谢谢!

我提这个Issue #12 时,采取的方式是新建了个APICloud项目专门用于打开指定浏览器页面的,但那时候我测试还是没办法调试的。

好的,我这边测试下

from avvw.

grapewheel avatar grapewheel commented on July 28, 2024

我可以在devServer中加入useLocalIp: true,host: '0.0.0.0'是允许外网访问你的本地测试服

from avvw.

amnextking avatar amnextking commented on July 28, 2024

配置如下,除加了个单文件预览的命令及使用本机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.

grapewheel avatar grapewheel commented on July 28, 2024

那就在下版本加入 useLocalIp,可能我用的linux系统没有对IP做限制

from avvw.

amnextking avatar amnextking commented on July 28, 2024

我更新到V1.2.0之后,修改某一页面的代码,热重载时会报错:
Uncaught RangeError: Maximum call stack size exceeded at runtime.js : 57

from avvw.

grapewheel avatar grapewheel commented on July 28, 2024

Uncaught RangeError: Maximum call stack size exceeded at runtime.js : 57
出现这个错误一般是webpack动态编译时内存溢出导致的(例如死循环,内存不足),你试下将修改的代码还原看看,检查那段代码是否有错误,同时可以看看runtime.js 57行是运行什么

from avvw.

amnextking avatar amnextking commented on July 28, 2024

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.

amnextking avatar amnextking commented on July 28, 2024

排查到问题了,是devServer的hot属性与HotModuleReplacementPlugin冲突了。

from avvw.

grapewheel avatar grapewheel commented on July 28, 2024

排查到问题了,是devServer的hot属性与HotModuleReplacementPlugin冲突了。

这会冲突?最后怎么解决?我这边还没发现这个问题,hot属性和HotModuleReplacementPlugin都要使能,是官方配置的

from avvw.

amnextking avatar amnextking commented on July 28, 2024

我将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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.