如何优雅的使用vue+Dcloud(Hbuild)开发混合app

2018-05-22 admin

最近在做混合app,前端框架用的是vue,打包app使用的是Dcloud,不过在开发过程中有一点不爽的是,如果想使用Dcloud提供的plus这个环境变量,难倒每次都得使用npm run build先把vue打包,然后再用Hbuild打开dist文件夹,然后再手机上运行查看鲜果吗?

显然这样做让人很不爽,根本没有开发效率可谈。那么应该怎么办呢?

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

是的,我们知道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
})

这样就会在项目中生成dist文件夹,里面有一个app.js,而且如果修改代码保存会自动更新app.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="app.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,manifest.js,vendor.js,由于还是运行在dev环境下,dev环境默认开了热更新,所以这三个文件也是热更新的。

然后在index.html中引入分别引入这三个文件,引入顺序为manifest.js > verdor.js > aoo.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">
        <script src="manifest.js"></script>
        <script src="vendor.js"></script>
        <script src="app.js"></script>
    </div>
  </body>
</html>

到此dist文件夹就处理完了,dist目录截图:

clipboard.png

在Hbuild中运行

然后就是把上面生成的dist文件夹再Hbuild中打开,首先打开Hbuild开发工具,然后依次 文件>打开目录 选择dist文件夹,然后我们需要吧dist文件夹转换成app项目:

clipboard.png

这样就会在dist目录添加一个manifest.json文件,这样就成功转为了一个app项目:

clipboard.png

用数据线把手机插入电脑(打开开发者调试模式),然后再Hbuild中依次 运行>手机运行> 选择你的手机 :

clipboard.png

然后稍等一会,就会在手机上运行看到效果。这时如果打开vue项目进行开发,比如修改了app.vue,只需要Ctrl+s保存一下app.vue,就会在手机上看到更改后的效果。

原文链接:https://segmentfault.com/a/1190000014966243

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-32767.html

文章标题:如何优雅的使用vue+Dcloud(Hbuild)开发混合app

相关文章
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
Web前端开发与iOS终端开发的异同
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点。 语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,...
2016-01-13
如何为高负载网络优化Nginx 和 Node.js?
译者:AlfredCheung 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对。他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器的C10K瓶颈。预设的配置已经可以获得很高的并发,不过,...
2015-11-12
使用jspdf生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化。 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js...
2017-03-25
HTML5游戏2015年的开发趋势
在互联网行业中,一个行业从零到成熟,开发者生态也是对应的,我们今年看到很多大公司,包括像微软和Google,也参与到了HTML5 开发者生态的建设当中。关于HTML5移动游戏的开发和盈利生态的走向又该去往何处?下面我们来试着讨论一下。 《围...
2015-11-12
如何编写干净高效的CSS代码
其实CSS的学习并不困难,但在一些较为大型的项目中就显得杂乱无章,变得很难管理,尤其是不同的人编写CSS的风格总会略有不同,从团队合作的层面上来说,就更加难以沟通,所以,我们为此总结了一些如何实现高效整洁的CSS代码原则: 使用Reset但...
2015-11-12
vue+element-ui+slot-scope实现可编辑表格
1.咱开发拿到需求大多数是去网上找成型的组件,找不到再看原生的方法能否实现,大牛除外哈,大牛一般喜欢封装组件框架。 2.可编辑表格在后台管理系统还是比较常用的,因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法,下...
2017-12-25
回到顶部