欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

electron-vue利用webpack打包實現(xiàn)多頁面的入口文件問題

 更新時間:2019年05月12日 09:06:51   作者:暖暖~醬  
項目需要在electron的項目中新打開一個窗口,利用webpack作為靜態(tài)資源打包器,發(fā)現(xiàn)在webpack中可以設(shè)置多頁面的入口,今天來講一下我在electron中利用webpack建立多頁面入口的踩坑經(jīng)驗,需要的朋友可以參考下

項目需要在electron的項目中新打開一個窗口,利用webpack作為靜態(tài)資源打包器,發(fā)現(xiàn)在webpack中可以設(shè)置多頁面的入口,今天來講一下我在electron中利用webpack建立多頁面入口的踩坑經(jīng)驗。

1、webpack的核心概念

•Entry:入口,Webpack執(zhí)行構(gòu)建的第一步從Entry開始;
•Module:模塊,在Webpack里一切皆模塊,一個模塊對應(yīng)著一個文件。Webpack會從配置的Entry開始遞歸找出所有依賴的模塊。
•Chunk:代碼塊,一個Chunk由多個模塊組合而成,用于代碼合并與分割。
•Loader:模塊轉(zhuǎn)換器,用于把模塊原內(nèi)容按照需求轉(zhuǎn)換成新內(nèi)容。
•Plugin:擴(kuò)展插件,在Webpack構(gòu)建流程中的特定時機(jī)注入擴(kuò)展邏輯來改變構(gòu)建結(jié)果或做你想要的事情。
•Output:輸出結(jié)果,在Webpack經(jīng)過一系列處理并得出最終想要的代碼后輸出結(jié)果。

2、配置多頁面的入口文件

electron構(gòu)建后的項目目錄如下:

•創(chuàng)建新的頁面

vue-cli生成的項目中只有一個main.js主入口的js文件來處理所有的vue頁面,我們創(chuàng)建多個頁面需要生成一個這個頁面相對應(yīng)的js文件,保存該頁面中包含的內(nèi)容。

•配置多頁面的入口文件

electron-vue創(chuàng)建的項目中有三個webpack的配置,我主要是在webpack.renderer.config中配置多個入口,生成多頁面的入口文件,代碼如下:

webpack中的HtmlWebpackPlugin插件是用來簡單創(chuàng)建HTML文件,用于服務(wù)器訪問。必須在新建HtmlWebpackPlugin中寫chunks,不然無法識別,頁面加載不出來

•electron中新建窗口,訪問新生成的頁面

electron中src的main文件中的index.js為主進(jìn)程,在該頁面中新建窗口,調(diào)用新生成的HTML文件,代碼如下:

const dialpadUrl = process.env.NODE_ENV === 'development'
 ? `http://localhost:9080/dialpad.html`
 : `file://${__dirname}/dialpad.html`

創(chuàng)建新窗口打開頁面的地址。electron的win.loadURL(url[, options])中的加載的文件方式包含:

•httpReferrer:一個HTTP Referrer url
•userAgent 發(fā)起請求的 userAgent
•extraHeaders:用”\n“分割的額外標(biāo)題
•baseURLForDataURL:要加載的數(shù)據(jù)文件的根URL(帶有路徑分隔符),只有當(dāng)指定的url是一個數(shù)據(jù)url并需要加載其他文件時,才需要這樣做

其實我也沒太懂這些都是什么,反正據(jù)我理解,url加載的只能是遠(yuǎn)程地址(如:http://)或是本地的HTML文件路徑(file://)

參考文章: segmentfault.com/a/119000001…

•打包報錯

上述就是我在electron-vue中利用webpack實現(xiàn)多頁面入口的全過程,不過最后打包時出現(xiàn)了錯誤,錯誤代碼如下:

上網(wǎng)搜了一下,說是node內(nèi)存溢出的問題,在package.json中手動設(shè)置node的內(nèi)存大小就可以啦

"scripts": {
  "buildAll": "node --max-old-space-size=4096 .electron-vue/build.js && electron-builder",
  "build": "node --max-old-space-size=4096 .electron-vue/build.js && electron-builder --win --  ia32 --publish always",
  "build:dir": "node --max-old-space-size=4096 .electron-vue/build.js && electron-builder -- win --ia32 --dir",
  "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
  "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
  "dev": "node --max-old-space-size=4096 .electron-vue/dev-runner.js",
  "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src",
  "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src",
  "pack": "npm run pack:main && npm run pack:renderer",
  "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-  vue/webpack.main.config.js",
  "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config      .electron-vue/webpack.renderer.config.js"
},

總結(jié)

以上所述是小編給大家介紹的electron-vue利用webpack打包實現(xiàn)多頁面的入口文件問題,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的!

相關(guān)文章

  • Vue實現(xiàn)插槽下渲染dom字符串的使用

    Vue實現(xiàn)插槽下渲染dom字符串的使用

    本文主要介紹了Vue實現(xiàn)插槽下渲染dom字符串的使用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • vue中手機(jī)號,郵箱正則驗證以及60s發(fā)送驗證碼的實例

    vue中手機(jī)號,郵箱正則驗證以及60s發(fā)送驗證碼的實例

    下面小編就為大家分享一篇vue中手機(jī)號,郵箱正則驗證以及60s發(fā)送驗證碼的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • 詳解vue.js移動端導(dǎo)航navigationbar的封裝

    詳解vue.js移動端導(dǎo)航navigationbar的封裝

    本篇文章主要介紹了vue.js移動端導(dǎo)航navigationbar的封裝,具有一定的參考價值,有興趣的可以了解一下
    2017-07-07
  • vue中進(jìn)行微博分享的實例講解

    vue中進(jìn)行微博分享的實例講解

    在本篇文章里小編給大家整理的是一篇關(guān)于vue中進(jìn)行微博分享的實例內(nèi)容,有需要的朋友們可以參考下。
    2019-10-10
  • Vue3安裝dataV報錯問題解決方案

    Vue3安裝dataV報錯問題解決方案

    這篇文章主要給大家介紹了關(guān)于Vue3安裝dataV報錯問題解決方案的相關(guān)資料,dataV用于大屏展示,個人覺得比echarts簡單很多,需要的朋友可以參考下
    2023-06-06
  • nodejs讀取并去重excel文件

    nodejs讀取并去重excel文件

    給大家?guī)硪黄P(guān)于用nodejs實現(xiàn)excel文件的讀取并去重的功能,有興趣的朋友參考學(xué)習(xí)下。
    2018-04-04
  • 詳解?Vue虛擬DOM如何提高前端開發(fā)效率

    詳解?Vue虛擬DOM如何提高前端開發(fā)效率

    這篇文章主要為大家介紹了詳解?Vue虛擬DOM如何提高前端開發(fā)效率,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-12-12
  • iView UI FORM 動態(tài)添加表單項校驗規(guī)則寫法實例

    iView UI FORM 動態(tài)添加表單項校驗規(guī)則寫法實例

    這篇文章主要為大家介紹了iView UI FORM 動態(tài)添加表單項校驗規(guī)則寫法實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-01-01
  • vue中Axios的封裝和API接口的管理示例詳解

    vue中Axios的封裝和API接口的管理示例詳解

    這篇文章主要介紹了vue中Axios的封裝和API接口的管理,主要目的就是在幫助我們簡化代碼和利于后期的更新維護(hù),本文結(jié)合實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2022-09-09
  • Vue.js更改調(diào)試地址端口號的實例

    Vue.js更改調(diào)試地址端口號的實例

    今天小編就為大家分享一篇Vue.js更改調(diào)試地址端口號的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09

最新評論