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

时间 2019-11-30

标签如何优雅使用 vue+dcloud vue dcloud hbuild 开发混合 app 繁體版

原文原文链接

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

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

显然这样作让人很不爽，根本没有开发效率可谈。那么应该怎么办呢？css

Hybrid App技术解析 -- 原理篇
html

若是npm run dev也能想build那样生成须要的静态文件该多好

是的，咱们知道npm run build会生成一个dist文件夹，里面就是最终生成的静态资源（js、css、index.html、图片等），而咱们最后要打包的就是这一部分代码。前端

而npm run dev是不会生成dist文件夹以及那些静态文件的，也就是说dev没有生成物理文件，而是放在了内存中，咱们是没有办法拿到这些静态文件的。vue

如今咱们须要的就是在运行dev的时候也生成物理文件，该怎么实现呢？node

webpack-dev-middleware-hard-disk插件

这里感谢Kees Kluskens大神提供了这个插件，咱们能够利用这个插件在运行dev的时候生成物理文件。webpack

首先如今项目中安装一下该插件，npm i --save-dev webpack-dev-middleware-hard-disk。而后只须要在项目build/webpack.dev.conf.js中添加下面这段代码：git

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，代码以下：github

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

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

new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks (module) {
        return (
        module.resource &amp;&amp;
        /\.js$/.test(module.resource) &amp;&amp;
        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环境默认开了热更新，因此这三个文件也是热更新的。npm

而后在index.html中引入分别引入这三个文件，引入顺序为manifest.js > verdor.js > aoo.js 代码以下：

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

到此dist文件夹就处理完了，dist目录截图：

在Hbuild中运行

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

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

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

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

原文地址：http://www.javashuo.com/article/p-xpuhqsex-ca.html