chore: 升级 vite@2.0

src/main/index.ts

@@ -3,7 +3,6 @@
  */
 import { join } from 'path'
 import { app, BrowserWindow } from 'electron'
-import is_dev from 'electron-is-dev'
 import dotenv from 'dotenv'
 
 dotenv.config({ path: join(__dirname, '../../.env') })
@@ -21,9 +20,9 @@ function createWin() {
     },
   })
 
-  const URL = is_dev
-    ? `http://localhost:${process.env.PORT}` // vite 启动的服务器地址
-    : `file://${join(__dirname, '../render/index.html')}` // vite 构建后的静态文件地址
+  const URL = app.isPackaged
+    ? `file://${join(__dirname, '../render/index.html')}` // vite 构建后的静态文件地址
+    : `http://localhost:${process.env.PORT}` // vite 启动的服务器地址
 
   win?.loadURL(URL)
 }

src/render/App.vue

@@ -3,7 +3,7 @@
     <img style="height:200px;" src="./assets/electron.png" alt="Electron logo">
     <img alt="Vue logo" src="./assets/logo.png" />
   </div>
-  <HelloWorld msg="Hello Electron 9.0 + Vue 3.0 + Vite" />
+  <HelloWorld msg="Electron@11、Vue@3、Vite@2" />
 </template>
 
 <script>

src/render/components/HelloWorld.vue

@@ -1,19 +1,89 @@
 <template>
   <h1>{{ msg }}</h1>
+
+  <label>
+    <input type="checkbox" v-model="useScriptSetup" /> Use
+    <code>&lt;script setup&gt;</code>
+  </label>
+  <label>
+    <input type="checkbox" v-model="useTsPlugin" /> Provide types for
+    <code>*.vue</code> imports
+  </label>
+
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <template v-if="!useScriptSetup">
+      <a
+        href="https://marketplace.visualstudio.com/items?itemName=octref.vetur"
+        target="_blank"
+      >Vetur</a>
+      +
+      <a
+        href="https://marketplace.visualstudio.com/items?itemName=znck.vue-language-features"
+        target="_blank"
+      >Vue DX</a>
+    </template>
+    <template v-else>
+      <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+    </template>
+  </p>
+  <p v-if="useTsPlugin">
+    tsconfig setup:
+    <br />1. Install and add
+    <code>@vuedx/typescript-plugin-vue</code> to tsconfig plugins
+    <br />2. Delete <code>src/shims-vue.d.ts</code>
+    <br />3. Open
+    <code>src/main.ts</code> in VSCode
+    <br />4. Open VSCode command input
+    <br />5. Search and run "Select TypeScript version" -> "Use workspace version"
+  </p>
   <button @click="count++">count is: {{ count }}</button>
-  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">Vite Docs</a> |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
+  </p>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { ref, defineComponent } from 'vue'
+export default defineComponent({
   name: 'HelloWorld',
   props: {
-    msg: String
-  },
-  data() {
-    return {
-      count: 0
+    msg: {
+      type: String,
+      required: true
     }
+  },
+  setup: () => {
+    const count = ref(0)
+    const useScriptSetup = ref(false);
+    const useTsPlugin = ref(false);
+    return { count, useScriptSetup, useTsPlugin }
   }
-}
+})
 </script>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
+</style>

src/render/main.ts

@@ -2,12 +2,12 @@ import { createApp } from 'vue'
 import App from './App.vue'
 // vite 会编译 import 的形式；所以 electron 及 node.js 内置模块用 require 形式
 const { ipcRenderer } = require('electron')
-import { store, isdev } from '/utils/index'
+// import { store, isdev } from '/utils/index'
 
 import './index.css'
 
 console.log('ipcRenderer:', ipcRenderer)
-console.log('Store', store)
-console.log('electron is dev', isdev)
+// console.log('Store', store)
+// console.log('electron is dev', isdev)
 
 createApp(App as any).mount('#app').$nextTick(window.ClosePreloadLoading)

src/render/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

src/render/shims.d.ts

@@ -1,9 +0,0 @@
-declare module '*.vue' {
-  import Vue from 'vue'
-  export default Vue
-}
-
-interface Window {
-  /** 关闭预加载动画 */
- ClosePreloadLoading: () => void
-}

src/render/source.d.ts

@@ -1,4 +0,0 @@
-declare const React: string
-declare module '*.json'
-declare module '*.png'
-declare module '*.jpg'

src/render/typings.d.ts

@@ -0,0 +1,11 @@
+
+// declare const React: string
+declare module '*.json'
+declare module '*.png'
+declare module '*.jpg'
+
+
+interface Window {
+  /** 关闭预加载动画 */
+ ClosePreloadLoading: () => void
+}