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

Vue項目打包成exe可執(zhí)行文件的實現(xiàn)過程(無瑕疵,完美版)

 更新時間：2022年11月15日 10:09:22   作者：打小就霸  
突然接到公司需求,說客戶想讓我們把項目直接打包,所以下面這篇文章主要給大家介紹了關(guān)于Vue項目打包成exe可執(zhí)行文件的實現(xiàn)過程,文中通過圖文介紹的非常詳細,需要的朋友可以參考下

Vue項目打包成exe可執(zhí)行文件

實現(xiàn)思路：

從electron官網(wǎng)上拉取代碼，把官網(wǎng)上拉取下來項目中的index.html替換成 自己vue項目打包好的dist文件中的index.html，輸入打包exe的命令即可

1、 拉取electron官網(wǎng)上的demo，拉下來之后安裝依賴，項目跑起來之后，就不用管demo了，開始配置自己的Vue項目

git clone https://github.com/electron/electron-quick-start
npm i
npm run start

2、修改自己項目的vue.config.js，路徑必須修改為 ./，不是這個后續(xù)打包好的頁面可能會出現(xiàn)白屏，加載不出來的情況

module.exports = {   
	publicPath: './',   
}

3、打包自己的Vue項目，這步應(yīng)該很熟了，將打包出來的 dist 文件夾復(fù)制到之前拉取的electron-quick-start文件夾中，和node_modules同級就行

npm run build

然后咱自己的項目就不用管了，剩下的就交給拉下來的electron-quick-start項目吧

4、在electron-quick-start項目中，下載打包需要的依賴 electron-packager

npm install electron-packager --save-dev

5、進入electron-quick-start項目，刪除項目根目錄下的 index.html 文件

6、在electron-quick-start項目中找到入口文件 main.js ，修改打包的文件路徑為我們的index.html（替換成我們的文件非常非常的重要，注意行數(shù)，一般都在16行多一點）

// main.js 原始內(nèi)容 
mainWindow.loadFile('index.html') 
// 修改后的內(nèi)容 
mainWindow.loadFile('./dist/index.html')*

7、在electron-quick-start項目中，進入 package.json ，在 scripts 中添加 packager 指令，如下所示：

"scripts": { 
"start": "electron .", 
"packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"
}

8、運行命令打包，然后項目中會出現(xiàn)一個 App-win32-x64 的文件夾，這個文件就是打包好的桌面應(yīng)用，文件夾里有一個 App.exe 文件，App.exe就是這個項目的啟動文件

npm run packager

9、打包完以后，項目中會出現(xiàn) App-win32-x64文件夾，進去之后，雙擊App.exe就可以訪問了

10、你已經(jīng)成功了，撒花

總結(jié)

到此這篇關(guān)于Vue項目打包成exe可執(zhí)行文件的文章就介紹到這了,更多相關(guān)Vue項目打包成exe可執(zhí)行文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • vue axios post發(fā)送復(fù)雜對象問題

    vue axios post發(fā)送復(fù)雜對象問題

    現(xiàn)在vue項目中，一般使用axios發(fā)送請求去后臺拉取數(shù)據(jù)。這篇文章主要介紹了vue axios post發(fā)送復(fù)雜對象的一點思考,需要的朋友可以參考下
    2019-06-06
  • vue中調(diào)接口的方式詳解this.$api、直接調(diào)用、axios

    vue中調(diào)接口的方式詳解this.$api、直接調(diào)用、axios

    這篇文章主要介紹了vue中調(diào)接口的方式：this.$api、直接調(diào)用、axios,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2023-11-11
  • 超簡單易懂的vue組件傳值

    超簡單易懂的vue組件傳值

    這篇文章主要為大家詳細介紹了vue組件傳值，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
    2022-03-03
  • vue單向數(shù)據(jù)流的深入理解

    vue單向數(shù)據(jù)流的深入理解

    隨著前端的項目的越來越復(fù)雜,出現(xiàn)了一堆概念來降低開發(fā)的復(fù)雜性,單向數(shù)據(jù)流就是其中一個,下面這篇文章主要給大家介紹了關(guān)于vue單向數(shù)據(jù)流的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-01-01
  • 詳解Vue中使用插槽（slot）、聚類插槽

    詳解Vue中使用插槽（slot）、聚類插槽

    這篇文章主要介紹了Vue中使用插槽（slot）、聚類插槽，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • VsCode新建VueJs項目的詳細步驟

    VsCode新建VueJs項目的詳細步驟

    本篇文章主要介紹了VsCode新建VueJs項目的詳細步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • Vue3中當(dāng)v-if和v-for同時使用時產(chǎn)生的問題和解決辦法

    Vue3中當(dāng)v-if和v-for同時使用時產(chǎn)生的問題和解決辦法

    封裝一個組件時,我使用到了v-for和v-if,它們在同一標(biāo)簽內(nèi),總是提示v-for循環(huán)出來的item在實例中沒有被定義,查詢資料后原因是因為v-for和v-if在同級使用時,v-if優(yōu)先級比v-for高,所以本文給大家介紹了Vue3中當(dāng)v-if和v-for同時使用時產(chǎn)生的問題和解決辦法
    2024-07-07
  • Vue-cli3執(zhí)行serve和build命令時nodejs內(nèi)存溢出問題及解決

    Vue-cli3執(zhí)行serve和build命令時nodejs內(nèi)存溢出問題及解決

    這篇文章主要介紹了Vue-cli3執(zhí)行serve和build命令時nodejs內(nèi)存溢出問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-01-01
  • Vue中@click.stop與@click.prevent、@click.native使用

    Vue中@click.stop與@click.prevent、@click.native使用

    這篇文章主要介紹了Vue中@click.stop與@click.prevent、@click.native使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-08-08
  • 在Vue中使用Compass的方法

    在Vue中使用Compass的方法

    本篇文章主要介紹了在Vue中使用Compass的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-03

最新評論