electron 的配置

1. 配置sass

npm install sass -D

css: {
      preprocessorOptions: {
        scss: {
          // 自动注入全局变量（只对 src 目录下的文件注入）
          additionalData: (content: string, filePath: string) => {
            if (!filePath.includes('src') && !filePath.includes('\\src') && !filePath.includes('/src')) {
              return content;
            }
            if (filePath.endsWith('var.scss')) return content;
            return `@use "${path.resolve(__dirname, './src/assets/style/var.scss').replace(/\\/g, '/')}" as *;\n` + content;
          },
          api: 'modern-compiler'
        }
      }
    },

2. 配置@

resolve: {
      alias: {
        "@": path.resolve(__dirname, "./src"), // 配置 @ 指向 src 目录
      },
    },

3. 配置代理

server: {
      proxy: {
        [env.VITE_BASE_URL]: {
          target: env.VITE_TARGET_URL,
          changeOrigin: true,
        },
      },
    },

4. 配置不同环境

.env.development（开发）、.env.test（测试）、.env.production（生产）是前端标准多环境方案，专门用来区分：
开发环境接口地址
测试环境接口地址
生产环境接口地址

在 axios 中自动使用
const request = axios.create({ baseURL: import.meta.env.VITE_APP_API_URL, // 自动读取当前环境 timeout: 5000 })
import { defineConfig, loadEnv } from 'vite' 
import vue from '@vitejs/plugin-vue' // 配置函数形式
export default defineConfig(({ mode }) => { // 加载当前环境变量 
   const env = loadEnv(mode, process.cwd())
}）

5. package.json 添加启动命令　

"scripts": { 
   "dev": "vite", // 默认开发环境（.env.development）
   "dev:test": "vite --mode test", // 测试环境开发（.env.test） 
   "build": "vue-tsc && vite build && electron-builder", // 默认生产打包 
   "build:test": "vue-tsc && vite build --mode test && electron-builder", // 测试环境打包 
   "preview": "vite preview" 
}

6. 安装 Pinia

npm install pinia

import { createPinia } from 'pinia' // 引入
const app = createApp(App) 
app.use(createPinia()) // 注册

user store

import { defineStore } from 'pinia'

// 第一个参数是 store 的唯一 id
export const useUserStore = defineStore('user', {
  state: () => ({
    token: '',
    userInfo: {
      name: '',
      age: 0
    }
  }),

  // 计算属性
  getters: {
    fullName: (state) => state.userInfo.name
  },

  // 修改状态
  actions: {
    setToken(token: string) {
      this.token = token
    },
    setUserInfo(info: any) {
      this.userInfo = info
    }
  }
})

在组件内使用

<script setup lang="ts">
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

// 取值
console.log(userStore.token)

// 调用方法修改
userStore.setToken('xxxx-token')
userStore.setUserInfo({ name: '张三', age: 20 })
</script>

<template>
  <div>{{ userStore.userInfo.name }}</div>
</template>

7、配合持久化　　

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

app.use(pinia)

8. 安装 mitt　

import mitt from 'mitt'

// 创建 mitt 实例
const emitter = mitt()

// 导出使用
export default emitter

// 1. 监听事件 emitter.on('事件名', 回调函数) 
// 2. 触发事件 emitter.emit('事件名', 参数) 
// 3. 取消监听（重要！防止内存泄漏） emitter.off('事件名')

9. 安装 axios　　　

import axios from 'axios'
import { ElLoading, ElMessage } from 'element-plus'

// 创建 axios 实例
const service = axios.create({
  // 从环境变量读取基础地址（你之前配置的.env）
  baseURL: import.meta.env.VITE_APP_API_URL,
  timeout: 10000
})

let loadingInstance: any = null

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 开启 loading
    loadingInstance = ElLoading.service({
      text: '加载中...',
      background: 'rgba(0, 0, 0, 0.1)'
    })

    // 可在这里加 token
    const token = localStorage.getItem('token')
    if (token) {
      config.headers['Authorization'] = 'Bearer ' + token
    }

    return config
  },
  (error) => {
    loadingInstance?.close()
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    loadingInstance?.close()
    return response.data
  },
  (error) => {
    loadingInstance?.close()

    // 统一错误提示
    const msg = error.message || '请求失败'
    ElMessage.error(msg)

    return Promise.reject(error)
  }
)

export default service　　

10. 安装 vue-router　　

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: () => import('@/views/home/index.vue')
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/login/index.vue')
  },
  {
    path: '/404',
    name: 'NotFound',
    component: () => import('@/views/error/404.vue')
  },
  {
    path: '/:pathMatch(.*)*',
    redirect: '/404'
  }
]

const router = createRouter({
  // 🔥 Electron 必须用 hash 模式！！
  history: createWebHashHistory(),
  routes
})

// 路由守卫（如需登录拦截）
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  if (to.path === '/login') {
    next()
  } else if (!token) {
    next('/login')
  } else {
    next()
  }
})

export default router

11. app.vue 设置　　

<template>
  <div class="container">
    <router-view v-slot="{ Component }">
        <transition name="scale" mode="out-in" appear>
          <keep-alive :include="includeList">
            <component :is="Component" />
          </keep-alive>
        </transition>
      </router-view>
  </div>
</template>

<script setup lang="ts">
import router from '@/router'
// 动态获取需要缓存的路由组件名称列表
const includeList = computed(() => {
  return router.getRoutes()
    .filter(route => route.name && route.meta?.keepAlive !== false)
    .map(route => route.name as string)
})
localStorage.setItem('token', 'your-token-here')

</script>

<style scoped lang="scss">
.container {
  padding: 30px;
}
</style>

12. 安装自动导入插件

npm install -D unplugin-auto-import unplugin-vue-components

import { defineConfig } from 'vite' 
import vue from '@vitejs/plugin-vue' 
import AutoImport from 'unplugin-auto-import/vite' 
export default defineConfig({ 
   plugins: [ vue(), // 👇 自动导入配置 
   AutoImport({ // 自动导入 Vue 相关函数 
   imports: [ 'vue', 'vue-router', 'pinia' ], 
   // 自动生成的类型声明文件位置（TS必备） dts: 'src/auto-imports.d.ts', 
   // 自动导入 eslint 配置（如果你用 eslint） eslintrc: { enabled: true } }) ], 
   // 你原来的 SCSS / 代理配置 保留不动 
   css: { 
       preprocessorOptions: { 
          scss: { 
              additionalData: `@import "./src/renderer/src/styles/variables.scss";` 
          }
       } 
    } 
})

13.安装day.js

npm install dayjs

AutoImport({
  imports: [
    'vue',
    'vue-router',
    'pinia',
    {
      // 👇 加上这个
      dayjs: [['default', 'dayjs']]
    }
  ],
  dts: 'src/auto-imports.d.ts'
})