本文的讨论以官方提供的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'修改为target: 'web'即可，再运行一次npm run dev，可以看到开发界面和我们打包完的web界面也是一样的了。
在这里插入图片描述

4.总结

需要把electron-vue打包成可以在浏览器运行的web应用，有如下文件需要做修改配置（具体修改见上文）

src/index.ejs（打包必须修改）
src\renderer\components\LandingPage.vue（打包必须修改）
.electron-vue/webpack.renderer.config.js（打包非必须，但需要开发环境则要修改）

以上参考自：https://github.com/SimulatedGREG/electron-vue/issues/195

electron-vue打包web应用（electron-vue build:web）