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的初始内容。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 今天是2017年5月5日星期五(农历丁酉年四月初十) 今日立夏《月令七十二候集解》:“立夏,四月节。立字解见...
    随云而飞阅读 350评论 0 0
  • 体验: 一方水土养一方人,故乡是源,伴随着你度过纯真年华,在每个日夜中滋养着你的习惯、喜好乃至性格。故乡是根,无论...
    summerzsf阅读 184评论 0 0
  • 在Xcode9一打断点就会在IQKeyboardManager断点在//Loading IQToolbar, IQ...
    傅hc阅读 976评论 1 3
  • 其实有很多话想要对你说,但又不知道从何说起。 那天你问我还记得你的生日吗,我回答,当然记得啊。这么多年我也不曾忘记...
    刘美麻子阅读 9,889评论 0 6