优雅的使用vue+Dcloud（Hbuild）开发混合app

最近在做混合app，前端框架用的是vue，打包app使用的是Dcloud，不过在开发过程中有一点不爽的是，如果想使用Dcloud提供的plus这个环境变量，难倒每次都得使用npm run build先把vue打包，然后再用Hbuild打开dist文件夹，然后再手机上运行查看效果吗？
显然这样做让人很不爽，根本没有开发效率可谈。那么应该怎么办呢？

准备工作，先在vue项目里装好Dcloud开发环境参考文章

也是我写的vue项目优雅的引入5+plus环境https://blog.csdn.net/qq_34684704/article/details/118243162

如果npm run dev也能想build那样生成需要的静态文件该多好a

是的，我们知道npm run build会生成一个dist文件夹，里面就是最终生成的静态资源（js、css、index.html、图片等），而我们最后要打包的就是这一部分代码。
而npm run dev是不会生成dist文件夹以及那些静态文件的，也就是说dev没有生成物理文件，而是放在了内存中，我们是没有办法拿到这些静态文件的。
现在我们需要的就是在运行dev的时候也生成物理文件，该怎么实现呢？

webpack-dev-middleware-hard-disk插件

这里感谢Kees Kluskens大神提供了这个插件，我们可以利用这个插件在运行dev的时候生成物理文件。
首先现在项目中安装一下该插件，npm i --save-dev webpack-dev-middleware-hard-disk。然后只需要在项目build/webpack.dev.conf.js中添加下面这段代码：

var compiler = webpack(devWebpackConfig)var devMiddleware = require('webpack-dev-middleware-hard-disk')(compiler, {publicPath: devWebpackConfig.output.publicPath,quiet: true
})

注意追加在devWebpackConfig(…)方法后面,不然会报错;如下

这样就会在项目中生成dist文件夹，里面有一个app.js(我的是main.js)，而且如果修改代码保存会自动更新app.js(main.js)。注意这里不会像build那样生成index.html，不过问题也不大，只需要把项目根目录下的index.html复制到dist文件夹下，然后把app.js引入index.html，代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>app</title></head><body><div id="app"><script src="main.js"></script></div></body>
</html>

但是如果只配置这一个地方，只会在dist生成app.js，如果项目比较大，app.js的体积会比较大，如果我们还想像build那样生成vendor.js和manifest.js（app.js、vendor.js、manifest.js的区别这里不做过多解释），还需要继续在build/webpack.dev.conf.js文件里面的plugins添加下面代码：

new webpack.optimize.CommonsChunkPlugin({name: 'vendor',minChunks (module) {return (module.resource &&/\.js$/.test(module.resource) &&module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0)}
}),new webpack.optimize.CommonsChunkPlugin({name: 'manifest',minChunks: Infinity
}),new webpack.optimize.CommonsChunkPlugin({name: 'app',async: 'vendor-async',children: true,minChunks: 3
}),

这样就会在dist文件夹下生成三个文件，app.js(main.js),manifest.js,vendor.js，由于还是运行在dev环境下，dev环境默认开了热更新，所以这三个文件也是热更新的。
然后在index.html body标签后面引入分别引入这三个文件，引入顺序为manifest.js > verdor.js > main.js 代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>app</title></head><body><div id="app"></div><script src="manifest.js"></script><script src="vendor.js"></script><script src="main.js"></script></body>
</html>

修改config文件夹里index.js里的assetsPublicPath配置为’./'相对路径,这样运行时生成的代码才能在真机上调试。到此dist文件夹就处理完了!!!

最后一步在HbuildX中真机运行.

hbuilderx中文件>打开目录找到刚刚项目生成的dist文件夹

下面把这个文件夹转为app项目，怎么做了？
新建一个5+app项目，把文件夹里的manifest.json文件剪切到要转成app项目的文件夹里。然后右键dist文件夹选择重新识别项目类型

这样dist项目就转为5+app类型项目。后面就是数据线连接手机运行项目了。这时如果打开vue项目进行开发，比如修改了app.vue，只需要Ctrl+s保存一下app.vue，然后稍等一会，就会在手机上运行看到效果。

优雅的使用vue+Dcloud（Hbuild）开发混合app相关推荐

移动开发-混合App介绍
3种开发类型的原理和对比什么是混合App(Hybrid App) Hybrid App是指介于web-app(网页APP,如京东web).native-app(原生应用,如手机上面的APP应用)这两 ...
初识H5开发混合APP
摘要随着智能手机的普及,用户对于 App 的需求更加多样化,从看新闻.看视频到购物.缴费都通过 App 实现.目前 App 有两种形式,一种是原生应用(Native App), 具有体验好.开发成 ...
Hbuild 开发H5 APP上架App Store流程
2018最新整理iOS app上架app详细教程上架iOS需要一个付费688的开发者账号,还没有的话申请一个或者借用. 申请苹果开发者账号教程上架App Store之前是先安装到苹果手机测试调试好 ...
apicloud开发混合app实战二手车项目
2019独角兽企业重金招聘Python工程师标准>>> html5本地页面可以打包成app的技术越来越成熟,发展出很多开发方式,例如现在的vuejs 框架,配合比较流行的bootst ...
vue做混合式app_Vue Cordova教程-Vue+Cordova打造跨平台可安装的混合APP视频教程（大地）...
Vue+Cordova打造跨平台可安装的混合APP视频教程必看说明: 目前购买此教程送Html5+Cordova+Ionic智能电视(TV)应用开发教程视频教程: 购买过Ionic的同学可以直接在( ...
混合App开发，HBuilder开发移动App
使用HBuilder开发混合App: Hbuilder:是一个在线打包工具,不需要在本地配置开发环境:直接将做好的网站,通过一些简单的操作,就能在线打包为一个App: 混合APP开发常见技术:Html ...
Vue + quasar-framework进行Vue混合app开发 ─ 模拟器选择及使用(四)
这里推荐2钟比较常用的模拟器,Genymotion和Android Studio自带的Android Virtual Device,至于喜欢用哪个就用哪个. Genymotion 需要准备下载的软件 ...
开发缺点_成都嗨创科技：原生APP开发与混合APP开发的优缺点对比
原生APP开发 1.开发语言: 安卓APP:Java开发语言: 苹果APP:Objective-C 或Swift 开发语言: 均为官方规定开发语言: 2.优点 1)使用体验较好,能够实现较为复杂的交互 ...
VSCode拓展插件推荐（HTML、Node、Vue、React开发均适用）
VSCode拓展插件推荐(HTML.Node.Vue.React开发均适用) 相似功能的插件,不推荐全都装上,请挑选一个使用本列表所有插件都经过本人测试,且认为相对好用,但是不代表不存在任何问题,大 ...

优雅的使用vue+Dcloud（Hbuild）开发混合app

准备工作，先在vue项目里装好Dcloud开发环境参考文章

如果npm run dev也能想build那样生成需要的静态文件该多好a

webpack-dev-middleware-hard-disk插件

修改config文件夹里index.js里的assetsPublicPath配置为’./'相对路径,这样运行时生成的代码才能在真机上调试。到此dist文件夹就处理完了!!!

最后一步在HbuildX中真机运行.

优雅的使用vue+Dcloud（Hbuild）开发混合app相关推荐

最新文章

热门文章