Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
OrganizationAdvent CalendarQiitadon (β)
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Vue + Electronなアプリを簡単に作る

More than 1 year has passed since last update.


  • 手順を忘れてしまうのでVue + Electronアプリの作り方を書いていきます
  • 何もないところからexeとdmgを作るところまで書きます
  • vue-cliとVue CLI Plugin Electron Builderを使います

vue cliをインストール(インストール済みならスキップ)

$ yarn global add @vue/cli
$ export PATH="$PATH:`yarn global bin`" # 実際は.bashrcや.zshrcなどに書くべきですね


$ vue create vue-electron-boilerplate
  • presetはdefaultでも良いと思いますがお好みでManually選択してください
  • 私はTypeScript Router Linter / Formatterで始めることが多いです
Vue CLI v3.11.0
? Please pick a preset: 
  default (babel, eslint) 
❯ Manually select features 

Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◯ Babel
 ◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◯ CSS Pre-processors
❯◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: TS, Router, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No


$ cd vue-electron-boilerplate
$ vue add electron-builder
$ yarn electron:serve
  • VueなElectronアプリが起動すればOK


  • vue.config.jsをルートディレクトリ直下に作成しビルド設定を書いていきます
  • 最初これが分からずpackage.jsonに書いても適用されず長いことハマってしまいました

    • electron-builderのドキュメントではpackge.jsonに設定を書けって言われているのですがVue CLI Plugin Electron Builderのドキュメントではvue.config.jsに設定を書けと言われています
  • winとmacの実行可能ファイルを作成する設定が書いてあります

  • extraResourcesは必須ではありませんが設定ファイルなどを外だしするのに便利だったので書いてあります

  • port変えたいことは多いと思うのでdevServerの設定もついでに書いてあります

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        appId: "com.example.app",
        win: {
          target: "portable",
          icon: "src/assets/icon.png"
        mac: {
          target: "dmg",
          icon: "src/assets/icon.png"
        extraResources: [
            from: "./resources/config",
            to: "config/",
            filter: ["**/*"]
  devServer: {
    port: 3000,
    disableHostCheck: true

  • package.jsonのrun scriptsにビルドコマンドを追記します
  "scripts": {
+     "electron:build:win": "vue-cli-service electron:build --win",
+     "electron:build:mac": "vue-cli-service electron:build --mac",


yarn electron:build:win                                                                                                                            
yarn electron:build:mac                                                                                                                            
  • 無事に成功すればdist_electronディレクトリにexeやdmgが作成されます
  • macアプリはmacじゃないとビルドできないと思います
  • macからwinアプリをビルドするにはwineなどが必要になってきます
    • この手順も後で書くかもしれません


Software Developer
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away