pack: vutron now uses the vite compiler

.babelrc

@@ -23,5 +23,5 @@
       ]
     }
   },
-  "plugins": ["@vue/babel-plugin-jsx", "@babel/plugin-transform-runtime", "@babel/plugin-syntax-import-assertions"]
+  "plugins": ["@vue/babel-plugin-jsx", "@babel/plugin-transform-runtime"]
 }

.env.build

@@ -1,4 +0,0 @@
-NODE_ENV=production
-CSC_IDENTITY_AUTO_DISCOVERY=false
-GENERATE_SOURCEMAP=false
-NODE_OPTIONS="--max-old-space-size=4096"

.env.dev

@@ -1 +0,0 @@
-ELECTRON_ENABLE_LOGGING=true

.env.pack

@@ -1 +0,0 @@
-NODE_ENV=production

.eslintrc.cjs

@@ -1,34 +0,0 @@
-module.exports = {
-  root: true,
-  parser: 'vue-eslint-parser',
-  parserOptions: {
-    parser: '@babel/eslint-parser',
-    sourceType: 'module',
-    ecmaVersion: 2018,
-    ecmaFeatures: {
-      jsx: true
-    }
-  },
-  env: {
-    browser: true,
-    node: true
-  },
-  extends: ['standard', 'plugin:vue/vue3-recommended'],
-  globals: {
-    __static: true
-  },
-  plugins: [
-    'vue'
-  ],
-  rules: {
-    'arrow-parens': 0,
-    'generator-star-spacing': 0,
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-    'no-case-declarations': 0,
-    'array-callback-return': 0,
-    'no-trailing-spaces': 1,
-    'no-control-regex': 0,
-    'no-useless-constructor': 0,
-    'node/no-deprecated-api': 0
-  }
-}

.eslintrc.json

@@ -0,0 +1,33 @@
+{
+  "root": true,
+  "parser": "vue-eslint-parser",
+  "parserOptions": {
+    "parser": "@babel/eslint-parser",
+    "sourceType": "module",
+    "ecmaVersion": 2020,
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "env": {
+    "node": true,
+    "es6": true
+  },
+  "extends": ["standard", "plugin:vue/vue3-recommended"],
+  "globals": {
+    "__static": true
+  },
+  "plugins": [
+    "vue"
+  ],
+  "rules": {
+    "arrow-parens": 0,
+    "generator-star-spacing": 0,
+    "no-case-declarations": 0,
+    "array-callback-return": 0,
+    "no-trailing-spaces": 1,
+    "no-control-regex": 0,
+    "no-useless-constructor": 0,
+    "node/no-deprecated-api": 0
+  }
+}

.runner/build/build.mjs

@@ -1,100 +0,0 @@
-import './env.mjs'
-import chalk from 'chalk'
-import webpack from 'webpack'
-import Listr from 'listr'
-import { performance } from 'perf_hooks'
-import _ from 'qsu'
-import FsMan from 'fsman'
-import mainConfig from '../config/webpack.main.mjs'
-import rendererConfig from '../config/webpack.renderer.mjs'
-
-const TAG_ERROR = `${chalk.bgRed.white(' ERROR ')} `
-const TAG_SUCCESS = `${chalk.bgGreen.black(' SUCCESS ')} `
-
-async function build () {
-  FsMan.empty('dist/electron')
-
-  let results = ''
-
-  const tasks = new Listr(
-    [
-      {
-        title: 'building main process',
-        task: async () => {
-          await pack(mainConfig)
-            .then(result => {
-              results += result + '\n\n'
-            })
-            .catch(err => {
-              console.log(`\n  ${TAG_ERROR}failed to build main process`)
-              console.error(`\n${err}\n`)
-            })
-        }
-      },
-      {
-        title: 'building renderer process',
-        task: async () => {
-          await pack(rendererConfig)
-            .then(result => {
-              results += result + '\n\n'
-            })
-            .catch(err => {
-              console.log(`\n  ${TAG_ERROR}failed to build renderer process`)
-              console.error(`\n${err}\n`)
-            })
-        }
-      }
-    ],
-    {
-      concurrent: 2
-    }
-  )
-
-  await tasks.run()
-    .catch(() => {
-      process.exit(1)
-    })
-
-  process.stdout.write('\x1B[2J\x1B[0f')
-  console.log(`
-    \n\n${results}
-    ${TAG_SUCCESS}Wait for ${chalk.greenBright('`electron-builder`')} process...
-    ${TAG_SUCCESS}${chalk.yellowBright(`Webpack Build Time: ${_.msToTime(performance.now())}`)}\n
-  `)
-  process.exit()
-}
-
-function pack (config) {
-  return new Promise((resolve, reject) => {
-    config.mode = 'production'
-
-    webpack(config, (err, stats) => {
-      if (err) {
-        reject(err.stack || err)
-      } else if (stats.hasErrors()) {
-        let err = ''
-
-        stats.toString({
-          chunks: false,
-          colors: true
-        })
-          .split(/\r?\n/)
-          .forEach(line => {
-            err += `    ${line}\n`
-          })
-
-        reject(err)
-      } else {
-        resolve(stats.toString({
-          chunks: false,
-          colors: true
-        }))
-      }
-    })
-  })
-}
-
-(async () => {
-  performance.now()
-  await build()
-})()

.runner/build/env.mjs

@@ -1,2 +0,0 @@
-import dotenv from 'dotenv'
-dotenv.config({ path: '.env.build' })

.runner/config/webpack.main.mjs

@@ -1,71 +0,0 @@
-import { join, dirname } from 'path'
-import packageJson from '../../package.json' assert { type: 'json' }
-import webpack from 'webpack'
-
-import TerserPlugin from 'terser-webpack-plugin'
-import eslintFriendlyFormatter from 'eslint-friendly-formatter'
-import ESLintPlugin from 'eslint-webpack-plugin'
-import { fileURLToPath } from 'url'
-
-process.env.BABEL_ENV = 'main'
-
-const IS_DEV_ENV = process.env.NODE_ENV !== 'production'
-const __dirname = dirname(fileURLToPath(import.meta.url))
-
-export default {
-  entry: {
-    main: join(__dirname, '../../src/main/index.js')
-  },
-  externals: [
-    ...Object.keys(packageJson.dependencies || {})
-  ],
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        use: 'babel-loader',
-        exclude: /node_modules/
-      },
-      {
-        test: /\.node$/,
-        use: 'node-loader'
-      }
-    ]
-  },
-  node: {
-    __dirname: IS_DEV_ENV,
-    __filename: IS_DEV_ENV
-  },
-  output: {
-    filename: '[name].js',
-    libraryTarget: 'commonjs2',
-    path: join(__dirname, '../../dist/electron')
-  },
-  optimization: {
-    minimize: true,
-    minimizer: [new TerserPlugin()]
-  },
-  plugins: [
-    new webpack.NoEmitOnErrorsPlugin(),
-    new ESLintPlugin({
-      extensions: ['js'],
-      formatter: eslintFriendlyFormatter()
-    }),
-    new webpack.DefinePlugin({
-      ...IS_DEV_ENV
-        ? {
-            __static: `"${join(__dirname, '../../static').replace(/\\/g, '\\\\')}"`
-          }
-        : {},
-      ...IS_DEV_ENV
-        ? {}
-        : {
-            'process.env.NODE_ENV': '"production"'
-          }
-    })
-  ],
-  resolve: {
-    extensions: ['.js', '.json', '.node']
-  },
-  target: 'electron-main'
-}

.runner/config/webpack.renderer.externals.whitelist.mjs

@@ -1,4 +0,0 @@
-export default [
-  'vue',
-  'vuetify'
-]

.runner/config/webpack.renderer.mjs

@@ -1,164 +0,0 @@
-import { join, dirname, resolve } from 'path'
-import packageJson from '../../package.json' assert { type: 'json' }
-import webpack from 'webpack'
-
-import TerserPlugin from 'terser-webpack-plugin'
-import CopyWebpackPlugin from 'copy-webpack-plugin'
-import HtmlWebpackPlugin from 'html-webpack-plugin'
-import { VueLoaderPlugin } from 'vue-loader'
-import eslintFriendlyFormatter from 'eslint-friendly-formatter'
-import ESLintPlugin from 'eslint-webpack-plugin'
-import externalsWhiteList from './webpack.renderer.externals.whitelist.mjs'
-import { fileURLToPath } from 'url'
-
-const IS_DEV_ENV = process.env.NODE_ENV !== 'production'
-const __dirname = dirname(fileURLToPath(import.meta.url))
-
-process.env.BABEL_ENV = 'renderer'
-
-export default {
-  devtool: IS_DEV_ENV ? 'source-map' : false,
-  optimization: {
-    minimize: true,
-    minimizer: [new TerserPlugin()]
-  },
-  entry: {
-    renderer: join(__dirname, '../../src/renderer/main.js')
-  },
-  externals: [
-    ...Object.keys(packageJson.dependencies || {}).filter(d => !externalsWhiteList.includes(d))
-  ],
-  module: {
-    rules: [
-      {
-        test: /\.vue$/,
-        use: {
-          loader: 'vue-loader',
-          options: {
-            extractCSS: !IS_DEV_ENV,
-            loaders: {
-              sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
-              scss: 'vue-style-loader!css-loader!sass-loader',
-              less: 'vue-style-loader!css-loader!less-loader'
-            }
-          }
-        }
-      },
-      {
-        test: /\.less$/,
-        use: ['vue-style-loader', 'css-loader', 'less-loader']
-      },
-      {
-        test: /\.css$/,
-        use: ['vue-style-loader', 'css-loader']
-      },
-      {
-        test: /\.html$/,
-        use: 'vue-html-loader'
-      },
-      {
-        test: /\.js$/,
-        use: 'babel-loader',
-        exclude: /node_modules/
-      },
-      {
-        test: /\.node$/,
-        use: 'node-loader'
-      },
-      {
-        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        type: 'asset/inline'
-      },
-      {
-        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
-        type: 'asset/inline'
-      },
-      {
-        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        type: 'asset/inline'
-      }
-    ]
-  },
-  node: {
-    __dirname: IS_DEV_ENV,
-    __filename: IS_DEV_ENV
-  },
-  plugins: [
-    new VueLoaderPlugin(),
-    new HtmlWebpackPlugin({
-      filename: 'index.html',
-      template: resolve(__dirname, '../../src/index.ejs'),
-      templateParameters (compilation, assets, options) {
-        return {
-          compilation,
-          webpack: compilation.getStats().toJson(),
-          webpackConfig: compilation.options,
-          htmlWebpackPlugin: {
-            files: assets,
-            options
-          },
-          process
-        }
-      },
-      minify: {
-        collapseWhitespace: true,
-        removeAttributeQuotes: true,
-        removeComments: true
-      },
-      isDevelopment: IS_DEV_ENV,
-      staticPath: join(__dirname, '/static').replace(/\\/g, '\\\\'),
-      nodeModules: IS_DEV_ENV
-        ? resolve(__dirname, '../../node_modules')
-        : false
-    }),
-    new webpack.NoEmitOnErrorsPlugin(),
-    new ESLintPlugin({
-      extensions: ['js', 'vue'],
-      exclude: [
-        '/node_modules/'
-      ],
-      formatter: eslintFriendlyFormatter()
-    }),
-    new webpack.DefinePlugin(IS_DEV_ENV
-      ? {
-          __static: `"${join(__dirname, '../../static').replace(/\\/g, '\\\\')}"`,
-          __VUE_OPTIONS_API__: false,
-          __VUE_PROD_DEVTOOLS__: false
-        }
-      : {
-          'process.env.NODE_ENV': '"production"',
-          __VUE_OPTIONS_API__: false,
-          __VUE_PROD_DEVTOOLS__: false
-        }
-    ),
-    ...IS_DEV_ENV
-      ? []
-      : [new CopyWebpackPlugin({
-          patterns: [
-            {
-              from: join(__dirname, '../../static'),
-              to: join(__dirname, '../../dist/electron/static')
-            }
-          ]
-        })],
-    ...IS_DEV_ENV
-      ? []
-      : [new webpack.LoaderOptionsPlugin({
-          minimize: true
-        })]
-  ],
-  cache: true,
-  output: {
-    filename: '[name].js',
-    libraryTarget: 'commonjs2',
-    path: join(__dirname, '../../dist/electron')
-  },
-  resolve: {
-    alias: {
-      '@': join(__dirname, '../../src/renderer'),
-      vue$: `vue/dist/vue.esm-browser${IS_DEV_ENV ? '' : '.prod'}`
-    },
-    extensions: ['.js', '.vue', '.json', '.css', '.node']
-  },
-  target: 'electron-renderer'
-}

.runner/dev.mjs

@@ -1,151 +0,0 @@
-import { config } from 'dotenv'
-import chalk from 'chalk'
-import electron from 'electron'
-import { dirname, join } from 'path'
-import { spawn } from 'child_process'
-import webpack from 'webpack'
-import WebpackDevServer from 'webpack-dev-server'
-import webpackHotMiddleware from 'webpack-hot-middleware'
-
-import mainConfig from './config/webpack.main.mjs'
-import rendererConfig from './config/webpack.renderer.mjs'
-import { fileURLToPath } from 'url'
-
-config({ path: '.env.dev' })
-
-const __dirname = dirname(fileURLToPath(import.meta.url))
-let electronProcess = null
-let manualRestart = false
-
-function log (processName, data, color = 'yellow') {
-  let strLog = ''
-
-  if (typeof data === 'object') {
-    data.toString().split(/\r?\n/).forEach(line => {
-      strLog += ' ' + line + '\n'
-    })
-  } else {
-    strLog += ` ${data}\n`
-  }
-
-  if (/[\dA-z]+/.test(strLog)) {
-    console.log(`${chalk[color].bold(`[${processName}] >`)}${strLog}`)
-  }
-}
-
-function startRenderer () {
-  return new Promise(resolve => {
-    (async () => {
-      rendererConfig.entry.renderer = [join(__dirname, 'devClient.mjs'), rendererConfig.entry.renderer]
-
-      const compiler = webpack({
-        mode: 'development',
-        ...rendererConfig
-      })
-
-      compiler.hooks.done.tap('done', stats => {
-        log('Renderer', stats)
-      })
-
-      const server = new WebpackDevServer(
-        {
-          port: 9080,
-          liveReload: true,
-          static: {
-            directory: join(__dirname, '../'),
-            watch: {
-              usePolling: true,
-              ignored: /node_modules/
-            }
-          },
-          setupMiddlewares (middlewares, devServer) {
-            devServer.app.use(webpackHotMiddleware(compiler, {
-              log: false,
-              heartbeat: 5000
-            }))
-            devServer.middleware.waitUntilValid(() => {
-              resolve()
-            })
-
-            return middlewares
-          }
-        },
-        compiler
-      )
-
-      await server.start()
-    })()
-  })
-}
-
-function startMain () {
-  return new Promise(resolve => {
-    mainConfig.entry.main = [join(__dirname, '../src/main/index.dev.js'), mainConfig.entry.main]
-
-    const compiler = webpack({
-      mode: 'development',
-      ...mainConfig
-    })
-
-    compiler.hooks.watchRun.tapAsync('watch-run', (compilation, done) => {
-      log('Main', chalk.white.bold('Compiling...'))
-      done()
-    })
-
-    compiler.watch({}, (err, stats) => {
-      if (err) {
-        console.log(err)
-        return
-      }
-
-      log('Main', stats)
-
-      if (electronProcess?.kill) {
-        manualRestart = true
-        process.kill(electronProcess.pid)
-        electronProcess = null
-        startElectron()
-
-        setTimeout(() => {
-          manualRestart = false
-        }, 3500)
-      }
-
-      resolve()
-    })
-  })
-}
-
-function startElectron () {
-  electronProcess = spawn(electron, [
-    ...[
-      '--inspect=5858',
-      join(__dirname, '/../dist/electron/main.js')
-    ],
-    ...process.argv.slice(2)
-  ])
-
-  electronProcess.stdout.on('data', data => {
-    log('Electron', data, 'blue')
-  })
-
-  electronProcess.stderr.on('data', data => {
-    log('Electron', data, 'red')
-  })
-
-  electronProcess.on('close', () => {
-    if (!manualRestart) {
-      process.exit()
-    }
-  })
-}
-
-(async () => {
-  try {
-    await startRenderer()
-    await startMain()
-    startElectron()
-  } catch (e) {
-    console.error(e)
-  }
-})()

.runner/devClient.mjs

@@ -1,15 +0,0 @@
-import * as hotClient from 'webpack-hot-middleware/client.js?noInfo=true&reload=true'
-
-hotClient.subscribe(event => {
-  if (event.action === 'compiling') {
-    document.body.innerHTML += `
-      <style>
-        .root {
-          color: #000;
-          padding: 10px 20px
-        }
-      </style>
-      <div class="root">Compiling Main Process...</div>
-    `
-  }
-})

README.md

@@ -1,8 +1,8 @@
 <div align="center">
 
-![vutron-logo](src/renderer/assets/img/vutron-logo.png)
+![vutron-logo](src/renderer/public/images/vutron-logo.png)
 
-Quick Start Templates for **[Vue 3](https://vuejs.org/)** + **[Electron.js](https://www.electronjs.org/)**
+Quick Start Templates for **[Vite](https://vitejs.dev)** + **[Vue 3](https://vuejs.org)** + **[Electron](https://www.electronjs.org)**
 
 [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/jooy2/vutron/blob/master/LICENSE)
 ![Programming Language Usage](https://img.shields.io/github/languages/top/jooy2/vutron)
@@ -16,6 +16,14 @@ Quick Start Templates for **[Vue 3](https://vuejs.org/)** + **[Electron.js](http
 
 </div>
 
+## ⚠️ NOTE: Vutron now uses the Vite compiler!!!
+
+By using the Vite compiler, we achieved our goals of reducing project and bundle size, and improving development environment and build speed.
+
+The old Vutron using the Webpack5 compiler has been split into the repositories below and will end support soon.
+
+https://github.com/jooy2/vutron-webpack
+
 ## Advantages of use
 
 - ✅ You can build immediately without any presets, so you can develop quickly.
@@ -33,6 +41,7 @@ Quick Start Templates for **[Vue 3](https://vuejs.org/)** + **[Electron.js](http
 
 ## Pre-configured components
 
+- [Vite 3.x.x](https://vitejs.dev)
 - [Electron 21.x.x](https://www.electronjs.org)
 - [Electron Builder 23.x](https://www.electron.build)
 - [Vue 3.2.x](https://vuejs.org)
@@ -41,7 +50,6 @@ Quick Start Templates for **[Vue 3](https://vuejs.org/)** + **[Electron.js](http
 - [Pinia 2.x](https://pinia.vuejs.org)
 - [Vuetify 3.x (Beta)](https://next.vuetifyjs.com)
 - [BabelJS 7.x](https://babeljs.io)
-- [Webpack 5.x](https://webpack.js.org)
 - [ESLint 8.x](https://eslint.org)
 
 ## Installation
@@ -93,7 +101,7 @@ You can perform multi-platform builds at once with the following command. Altern
 $ npm run build
 ```
 
-`Multipass` configuration may be required for Linux builds. Learn more about `Multipass` through the following link: https://multipass.run/
+`Multipass` configuration may be required for Linux builds. Learn more about `Multipass` through the following link: https://multipass.run
 
 ## Looking for Electron templates made with React?
 
@@ -107,5 +115,3 @@ You can report issues on [Github Issue](https://github.com/jooy2/vutron/issues).
 
 ## License
 Copyright © 2022 Jooy2 Released under the MIT license.
-
-The structure and some code of this project was inspired by **[electron-vue](https://github.com/SimulatedGREG/electron-vue)**.

package.json

@@ -1,31 +1,28 @@
 {
   "name": "vutron",
   "version": "1.0.0",
-  "description": "Quick Start Templates for Vue 3 + Electron",
-  "main": "./dist/electron/main.js",
+  "description": "Quick Start Templates for Vite + Vue 3 + Electron",
+  "main": "dist/main/index.js",
   "scripts": {
-    "build:dir": "node .runner/build/build.mjs && electron-builder --dir",
-    "build": "node .runner/build/build.mjs && electron-builder",
-    "build:mac": "node .runner/build/build.mjs && CSC_IDENTITY_AUTO_DISCOVERY=false electron-builder --mac",
-    "build:linux": "node .runner/build/build.mjs && electron-builder --linux",
-    "build:win": "node .runner/build/build.mjs && electron-builder --windows",
-    "dev": "node .runner/dev.mjs --ignore-gpu-blacklist",
-    "pack": "npm run pack:main && npm run pack:renderer",
-    "pack:main": "node -r dotenv/config webpack --progress --colors --config .runner/webpack.main.mjs dotenv_config_path=.env.pack",
-    "pack:renderer": "node -r dotenv/config webpack --progress --colors --config .runner/webpack.renderer.mjs dotenv_config_path=.env.pack",
+    "dev": "NODE_ENV=development vite",
+    "build": "NODE_ENV=production vite build && electron-builder",
+    "build:dir": "NODE_ENV=production vite build && electron-builder --dir",
+    "build:mac": "NODE_ENV=production vite build && CSC_IDENTITY_AUTO_DISCOVERY=false electron-builder --mac",
+    "build:linux": "NODE_ENV=production vite build && electron-builder --linux",
+    "build:win": "NODE_ENV=production vite build && electron-builder --windows",
     "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src",
     "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src",
     "postinstall": "npm run lint:fix && electron-builder install-app-deps"
   },
   "engines": {
-    "node": ">=17.1.0"
+    "node": ">=16.0.0"
   },
   "author": "jooy2 <jootc.help@gmail.com>",
   "license": "MIT",
   "dependencies": {
     "@electron/remote": "^2.0.8",
+    "eslint-friendly-formatter": "^4.0.1",
     "pinia": "^2.0.22",
-    "v8-compile-cache": "^2.3.0",
     "vue": "^3.2.39",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.1.5",
@@ -34,49 +31,30 @@
   "devDependencies": {
     "@babel/core": "^7.19.1",
     "@babel/eslint-parser": "^7.19.1",
-    "@babel/plugin-syntax-import-assertions": "^7.18.6",
     "@babel/plugin-transform-runtime": "^7.19.1",
     "@babel/preset-env": "^7.19.1",
+    "@vitejs/plugin-vue": "^3.1.2",
     "@vue/babel-plugin-jsx": "^1.1.1",
-    "babel-loader": "^8.2.5",
-    "chalk": "^5.0.1",
-    "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.7.1",
-    "dotenv": "^16.0.2",
     "electron": "^21.0.0",
     "electron-builder": "^23.3.3",
-    "electron-devtools-installer": "^3.2.0",
     "eslint": "^8.24.0",
     "eslint-config-standard": "^17.0.0",
-    "eslint-friendly-formatter": "^4.0.1",
-    "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-vue": "^9.5.1",
-    "eslint-webpack-plugin": "^3.2.0",
-    "fsman": "^1.5.0",
-    "html-webpack-plugin": "^5.5.0",
-    "listr": "^0.14.3",
-    "node-loader": "^2.0.0",
-    "qsu": "^1.1.0",
-    "terser-webpack-plugin": "^5.3.6",
-    "vue-eslint-parser": "^9.1.0",
-    "vue-html-loader": "^1.2.4",
-    "vue-loader": "^17.0.0",
-    "vue-style-loader": "^4.1.3",
-    "vue-template-compiler": "^2.7.10",
-    "webpack": "^5.74.0",
-    "webpack-dev-server": "^4.11.1",
-    "webpack-hot-middleware": "^2.25.2"
+    "vite": "^3.1.4",
+    "vite-plugin-electron": "^0.9.3",
+    "vue-eslint-parser": "^9.1.0"
   },
   "build": {
     "productName": "Vutron",
     "appId": "com.vutron.vutron",
     "compression": "maximum",
     "directories": {
-      "output": "dist",
-      "buildResources": "buildRes"
+      "buildResources": "buildRes",
+      "output": "./dist/release/${version}"
     },
     "files": [
-      "dist/electron/**/*"
+      "dist/**/*",
+      "!dist/release/**/*"
     ],
     "artifactName": "${productName} ${version}.${ext}",
     "mac": {

src/index.ejs

@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-    </head>
-    <body>
-        <div id="app"></div>
-    </body>
-    <% if (!htmlWebpackPlugin.options.isDevelopment) { %>
-        <script>
-            window.__static = '<%= htmlWebpackPlugin.options.staticPath %>'
-        </script>
-    <% } %>
-</html>

src/main/MainRunner.js

@@ -1,12 +1,7 @@
 import { app, BrowserWindow } from 'electron'
 import Constants from './utils/Constants'
-import { join } from 'path'
 import * as electronRemote from '@electron/remote/main'
 
-const getAppIcon = () => {
-  return join(__static, Constants.APP_ICON)
-}
-
 const exitApp = (mainWindow) => {
   if (mainWindow && !mainWindow.isDestroyed()) {
     mainWindow.hide()
@@ -18,7 +13,6 @@ const exitApp = (mainWindow) => {
 export const createMainWindow = async (mainWindow) => {
   mainWindow = new BrowserWindow({
     title: Constants.APP_NAME,
-    icon: getAppIcon(),
     show: false,
     width: Constants.IS_DEV_ENV ? 1500 : 1200,
     height: 650,
@@ -64,7 +58,6 @@ export const createErrorWindow = async (errorWindow, mainWindow, details) => {
 
   errorWindow = new BrowserWindow({
     title: Constants.APP_NAME,
-    icon: getAppIcon(),
     show: false,
     resizable: Constants.IS_DEV_ENV,
     webPreferences: Constants.DEFAULT_WEB_PREFERENCES

src/main/index.dev.js

@@ -1,10 +0,0 @@
-import { app } from 'electron'
-import './index'
-import * as electronDevtoolsInstaller from 'electron-devtools-installer'
-
-app.on('ready', async () => {
-  await electronDevtoolsInstaller.default(electronDevtoolsInstaller.VUEJS_DEVTOOLS)
-    .catch(e => {
-      console.log(`Failed to install Vue Devtools \n(${e})`)
-    })
-})

src/main/index.js

@@ -1,7 +1,4 @@
-import 'v8-compile-cache'
 import { app } from 'electron'
-import { join, dirname } from 'path'
-import { fileURLToPath } from 'url'
 import Constants from './utils/Constants'
 import { createErrorWindow, createMainWindow } from './MainRunner'
 import Menus from './utils/Menus'
@@ -10,11 +7,6 @@ let mainWindow
 let errorWindow
 
 app.on('ready', () => {
-  if (!Constants.IS_DEV_ENV) {
-    global.__static = join(dirname(fileURLToPath(import.meta.url)), '/static')
-      .replace(/\\/g, '\\\\')
-  }
-
   Menus.macOSDisableDefaultMenuItem()
 
   mainWindow = createMainWindow(mainWindow)

src/main/utils/Constants.js

@@ -1,8 +1,8 @@
 import { platform } from 'os'
+import { join } from 'path'
 
 export default class Constants {
   static APP_NAME = 'Vutron'
-  static APP_ICON = 'app-icon.png'
 
   static IS_DEV_ENV = process.env.NODE_ENV === 'development'
 
@@ -15,6 +15,6 @@ export default class Constants {
     enableRemoteModule: true
   }
 
-  static APP_INDEX_URL_DEV = 'http://localhost:9080/index.html'
-  static APP_INDEX_URL_PROD = './dist/electron/index.html'
+  static APP_INDEX_URL_DEV = 'http://localhost:5173/index.html'
+  static APP_INDEX_URL_PROD = join(__dirname, '../index.html')
 }

src/renderer/components/screen/MainScreen.vue

@@ -1,9 +1,9 @@
 <script setup>
-// import { useI18n } from 'vue-i18n'
+import { useI18n } from 'vue-i18n'
 import { useTheme } from 'vuetify'
-import Utils from '../../assets/js/utils'
+import Utils from '../../utils'
 
-// const { locale } = useI18n()
+const { locale } = useI18n()
 const theme = useTheme()
 
 const handleChangeTheme = () => {
@@ -11,7 +11,11 @@ const handleChangeTheme = () => {
 }
 
 const handleChangeLanguage = () => {
-  // locale.value = 'en' // TODO
+  if (locale.value === 'en') {
+    locale.value = 'ko'
+  } else {
+    locale.value = 'en'
+  }
 }
 
 const handleAbout = async () => {
@@ -29,7 +33,7 @@ const handleAbout = async () => {
         <img
           alt="logo"
           class="ma-auto h-auto w-75"
-          src="~@/assets/img/vutron-logo.png"
+          src="/images/vutron-logo.png"
         >
       </v-col>
       <v-col cols="12">
@@ -47,7 +51,6 @@ const handleAbout = async () => {
       <v-col cols="4">
         <v-btn
           block
-          disabled
           color="primary"
           @click="handleChangeLanguage"
         >

src/renderer/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+    </head>
+    <body>
+        <div id="app"></div>
+    </body>
+    <script type="module" src="./main.js"></script>
+</html>

src/renderer/plugins/i18n.js

@@ -1,7 +1,7 @@
 import { createI18n } from 'vue-i18n'
-import en from '../../locales/en.json'
-import ko from '../../locales/ko.json'
-import Utils from '../assets/js/utils'
+import en from '../locales/en.json'
+import ko from '../locales/ko.json'
+import Utils from '../utils'
 
 export default createI18n({
   legacy: false,

vite.config.js

@@ -0,0 +1,42 @@
+import { defineConfig } from 'vite'
+import electron from 'vite-plugin-electron'
+import vue from '@vitejs/plugin-vue'
+import { resolve, join } from 'path'
+
+export default defineConfig({
+  resolve: {
+    extensions: [
+      '.mjs',
+      '.js',
+      '.ts',
+      '.vue',
+      '.json',
+      '.scss'
+    ],
+    alias: {
+      '@': join(__dirname, 'src')
+    }
+  },
+  base: './',
+  root: resolve('./src/renderer'),
+  publicDir: resolve('./src/renderer/public'),
+  build: {
+    outDir: resolve('./dist')
+  },
+  plugins: [
+    vue(),
+    electron({
+      main: {
+        entry: 'src/main/index.js',
+        vite: {
+          publicDir: resolve('./src/main'),
+          build: {
+            emptyOutDir: true,
+            outDir: 'dist/main'
+          }
+        }
+      },
+      renderer: {}
+    })
+  ]
+})