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

悠悠 2023-06-04 08:56 20阅读 0赞

# 如何优雅的使用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，代码如下：

<!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目录截图：

![img2018-cnblogs-com_blog_1504257_201811_1504257-20181105195020252-1560791402.png][]

## 在Hbuild中运行 ##

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

![img2018-cnblogs-com_blog_1504257_201811_1504257-20181105195028173-1743867507.png][]

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

![img2018-cnblogs-com_blog_1504257_201811_1504257-20181105195036183-1543895225.png][]

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

![img2018-cnblogs-com_blog_1504257_201811_1504257-20181105195044604-978371265.png][]

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

原文地址：[https://segmentfault.com/a/1190000014966243][https_segmentfault.com_a_1190000014966243]

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[Kees Kluskens]: https://github.com/SpaceK33z
[img2018-cnblogs-com_blog_1504257_201811_1504257-20181105195020252-1560791402.png]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/50/img2018-cnblogs-com_blog_1504257_201811_1504257-20181105195020252-1560791402.png
[img2018-cnblogs-com_blog_1504257_201811_1504257-20181105195028173-1743867507.png]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/50/img2018-cnblogs-com_blog_1504257_201811_1504257-20181105195028173-1743867507.png
[img2018-cnblogs-com_blog_1504257_201811_1504257-20181105195036183-1543895225.png]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/50/img2018-cnblogs-com_blog_1504257_201811_1504257-20181105195036183-1543895225.png
[img2018-cnblogs-com_blog_1504257_201811_1504257-20181105195044604-978371265.png]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/50/img2018-cnblogs-com_blog_1504257_201811_1504257-20181105195044604-978371265.png
[https_segmentfault.com_a_1190000014966243]: https://segmentfault.com/a/1190000014966243