国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

如何優雅的使用vue+Dcloud(Hbuild)開發混合app

fsmStudy / 1782人閱讀

摘要:而是不會生成文件夾以及那些靜態文件的,也就是說沒有生成物理文件,而是放在了內存中,我們是沒有辦法拿到這些靜態文件的。首先現在項目中安裝一下該插件,。這時如果打開項目進行開發,比如修改了,只需要保存一下,就會在手機上看到更改后的效果。

如何優雅的使用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,就會在手機上看到更改后的效果。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/95185.html

相關文章

  • 如何優雅使用vue+DcloudHbuild開發混合app

    摘要:而是不會生成文件夾以及那些靜態文件的,也就是說沒有生成物理文件,而是放在了內存中,我們是沒有辦法拿到這些靜態文件的。首先現在項目中安裝一下該插件,。這時如果打開項目進行開發,比如修改了,只需要保存一下,就會在手機上看到更改后的效果。 如何優雅的使用vue+Dcloud(Hbuild)開發混合app 最近在做混合app,前端框架用的是vue,打包app使用的是Dcloud,不過在開發過程...

    zhaofeihao 評論0 收藏0

發表評論

0條評論

fsmStudy

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<