本文的討論以官方提供的demo為例

0.electron-vue的打包方式

• npm run build 這種打包方式對應以electron-renderer為輸出的開發環境（預設）
• npm run build:web 這種打包方式對應以web為輸出的開發環境（默需手工修改配置及部分檔案）

1.npm run build

在命令終端執行此命令後，在build資料夾會生成應用可執行檔案；在dist/electron資料夾會生成靜態檔案（因為是electron-renderer輸出，此靜態檔案在瀏覽器不可直接執行）

2.npm run build:web

在命令終端執行此命令後，在dist/web資料夾會生成靜態檔案，把index.html直接在瀏覽器開啟，出現如下錯誤：

• 第一個process的報錯，通過如下方式解決： 把src/index.ejs的

<script>
      if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
</script>

改為：

<% if (process.env.NODE_ENV !== 'production') { %>
      <script>
        if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
      </script>
<% } %>
 

• 第二個shell的報錯，通過如下方式解決： 把src\renderer\components\LandingPage.vue下的

this.$electron.shell.openExternal(link)

改為

window.location.href = link

以上兩處地方修改完畢，再次執行npm run build:web，開啟生成的html檔案，沒報錯，且連結正常。

3.執行web的開發環境

在修改了以上兩處地方之後，在終端執行npm run dev，我們發現開發介面和我們剛剛執行build:web生成後的檔案介面不一樣，npm run dev仍然是以electron-renderer為輸出的開發環境，如果需要執行web的開發環境應該如何配置？只需要把.electron-vue/webpack.renderer.config.js的target: 'electron-renderer'

4.總結

需要把electron-vue打包成可以在瀏覽器執行的web應用，有如下檔案需要做修改配置（具體修改見上文）

• src/index.ejs（打包必須修改）
• src\renderer\components\LandingPage.vue（打包必須修改）
• .electron-vue/webpack.renderer.config.js（打包非必須，但需要開發環境則要修改）