摘要：而是不会生成文件夹以及那些静态文件的，也就是说没有生成物理文件，而是放在了内存中，我们是没有办法拿到这些静态文件的。首先现在项目中安装一下该插件，。这时如果打开项目进行开发，比如修改了，只需要保存一下，就会在手机上看到更改后的效果。
如何优雅的使用vue+Dcloud（Hbuild）开发混合app
最近在做混合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，代码如下：
app
但是如果只配置这一个地方，只会在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 代码如下：
app
到此dist文件夹就处理完了，dist目录截图：
在Hbuild中运行然后就是把上面生成的dist文件夹再Hbuild中打开，首先打开Hbuild开发工具，然后依次 文件>打开目录 选择dist文件夹，然后我们需要吧dist文件夹转换成app项目：
这样就会在dist目录添加一个manifest.json文件，这样就成功转为了一个app项目：
用数据线把手机插入电脑（打开开发者调试模式），然后再Hbuild中依次 运行>手机运行> 选择你的手机 ：
然后稍等一会，就会在手机上运行看到效果。这时如果打开vue项目进行开发，比如修改了app.vue，只需要Ctrl+s保存一下app.vue，就会在手机上看到更改后的效果。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113349.html
摘要：而是不会生成文件夹以及那些静态文件的，也就是说没有生成物理文件，而是放在了内存中，我们是没有办法拿到这些静态文件的。首先现在项目中安装一下该插件，。这时如果打开项目进行开发，比如修改了，只需要保存一下，就会在手机上看到更改后的效果。 如何优雅的使用vue+Dcloud（Hbuild）开发混合app 最近在做混合app，前端框架用的是vue，打包app使用的是Dcloud，不过在开发过程...
摘要：而是不会生成文件夹以及那些静态文件的，也就是说没有生成物理文件，而是放在了内存中，我们是没有办法拿到这些静态文件的。首先现在项目中安装一下该插件，。这时如果打开项目进行开发，比如修改了，只需要保存一下，就会在手机上看到更改后的效果。 如何优雅的使用vue+Dcloud（Hbuild）开发混合app 最近在做混合app，前端框架用的是vue，打包app使用的是Dcloud，不过在开发过程...
摘要：什么是首先简单介绍一下是由开发的一套增强版的手机浏览器引擎与之配套的时使用提供的这一套方案可以方便快捷的开发和打包出具有原生能力的混合什么是是由中国产业联盟公司中国信通院等是成员提出的一套的增强版规范此规范让使用即可具备原生调用能力包括但不 什么是5+Runtime? 首先简单介绍一下5+Runtime: HTML5 Plus Runtime(5+Rumtime)是由Dcloud开发的...
摘要：当时下载了一个，下载了官方提供的示例教程。关于项目目录开发规范一定要遵守，直接通过官网学习即可。最后就是发布安卓包和苹果包了。我将自己做的第一个新闻列表新闻详情程序打包，安装到了安卓手机上测试了下，效果非常棒。 本人微信公众号：前端修炼之路，欢迎关注 背景介绍 大概在今年的十月份左右，我了解到Dcloud推出了uni-app。当时下载了一个Hbuilder X，下载了官方提供的hell...
摘要：当时下载了一个，下载了官方提供的示例教程。关于项目目录开发规范一定要遵守，直接通过官网学习即可。最后就是发布安卓包和苹果包了。我将自己做的第一个新闻列表新闻详情程序打包，安装到了安卓手机上测试了下，效果非常棒。 本人微信公众号：前端修炼之路，欢迎关注 背景介绍 大概在今年的十月份左右，我了解到Dcloud推出了uni-app。当时下载了一个Hbuilder X，下载了官方提供的hell...
阅读 2064·2023-04-25 14:50
阅读 902·2021-10-13 09:50
阅读 2300·2021-09-02 15:40
阅读 1653·2019-08-30 15:56
阅读 1675·2019-08-29 15:29
阅读 2780·2019-08-29 15:27
阅读 3414·2019-08-29 15:14
阅读 1023·2019-08-29 13:01
