npm install @vitejs/plugin-basic-ssl -D

import basicSsl from '@vitejs/plugin-basic-ssl'

export default defineConfig({
  plugins: [
    basicSsl()
  ]
  server: {
    https: true,
    host: "0.0.0.0",
    port: 5173,
    open: true, 
  },
})

Are they installed?
Failed to resolve import "@/views/Home.vue" from "src/router/index.ts". Does the file exist?
上午8:48:58 [vite] Internal server error: Failed to resolve import "@/views/Home.vue" from "src/router/index.ts". Does the file exist?
  Plugin: vite:import-analysis
  File: /Users/larahuang/Desktop/作品集/員工打卡系統/CheckInSystem/src/router/index.ts:7:36
  4  |      path: "/",
  5  |      name: "Home",
  6  |      component: () => import("@/views/Home.vue")
     |                              ^

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url';//加入
import { resolve } from 'path';//加入

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  //加入
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  base: '/',
  //用於環境變數
  envDir: resolve(__dirname, './env'),
})

npm install --save-dev @types/node

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* 錯誤訊息Vetur(2792)*/
    "moduleResolution": "node",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    /* 錯誤訊息ts(6133)*/
    "noUnusedLocals": false,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

"types": [
  "vite-plugin-pages/client",
  "vite-plugin-vue-layouts/client"
]

"compilerOptions": {
   "target": "ESNext",
}

@use "./public.scss";

declare module 'element-plus'

vetur.validation.script

<script setup lang="ts">
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

    const ruleFormRef = ref<InstanceType<typeof FormInstance>>()
</script>

<script setup lang="ts">
import type { ElForm } from 'element-plus'
type FormInstance =InstanceType<typeof ElForm>
type FormRules =InstanceType<typeof ElForm>

    const ruleFormRef = ref<FormInstance>()
</script>