Electron+Vue配置

#1 建立Electron项目

Electron项目生成推荐使用Electron-forge。

使用Electron-forge建立项目后，项目目录类似：

node_modules/
out/
src/
  index.html
  index.js
.compilerc
.eslintrc
.gitignore
package.json

#2 建立Vue项目

推荐使用vue-cli建立vue项目。

cd src
vue init webpack app

建立好后，在src/下多了一个app/目录，即vue的项目目录。

#3 修改Vue build配置

修改src/app/config/index.js中的build对象，如下：

    // Template for index.html
    index: path.resolve(__dirname, '../../index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../../static'),
    assetsSubDirectory: '',
    assetsPublicPath: './static/',

#4 执行build，观察效果

在src/app下执行npm run build进行vue打包。完毕后可以观察到src/下多出一些内容：

src/
  app/
  static/
  index.html
  index.js

这里的index.html就是vue打包生成的主页文件，而static/则是打包生成的静态资源。

再在根目录下执行npm run start即可看到Electron窗口，其中显示了Vue的初始内容。