最近在做混合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,然后稍等一会,就会在手机上运行看到效果。