vite.config.js

自动导入vue

plugins: [
    vue(),
    vueJsx(),
    AutoImport({
        imports: ["vue"],
        resolvers: [ElementPlusResolver()],
    })

• AutoImport(...)：自动导入 Vue 中的函数，比如 ref, reactive, watch 等
• resolvers: [ElementPlusResolver()] // ⬅️ 自动导入 Element Plus 中的组件/方法

sass

Sass（Syntactically Awesome Style Sheets）提供了比普通 CSS 更强大的功能，例如：

• 变量（Variables）

$primary-color: #333;
body {
  color: $primary-color;
}

• 嵌套

nav {
  ul {
    li {
      a {
        color: red;
      }
    }
  }
}

• 继承

.message {
  padding: 10px;
  border: 1px solid #ccc;
}

.success {
  @extend .message;
  border-color: green;
}

Components({
    resolvers: [ElementPlusResolver(
        {
            // 自动使用预处理样式
            importStyle: "sass",
        }
    )],
    // 指定自定义组件位置(默认:src/components)
    dirs: ["src/components", "src/**/components"],
}),

• components：自动导入vue组件（不用手动import），配置不同的组件库（如 Element Plus、Naive UI 等）
• resolvers: [ElementPlusResolver(...)]：resolvers 是一个组件“解析器”数组，用来告诉插件：

当你使用 <ElButton>、<ElInput> 这类组件时，我该怎么从组件库中自动导入它们。

其中 ElementPlusResolver(...) 就是给 Element Plus 提供支持的解析器。

• importStyle: "sass"

在引入 Element Plus 的时候，使用 sass 样式版本（而不是默认的 CSS）。

配置路径名

  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      "store": fileURLToPath(new URL('src/store', import.meta.url)),
      "utils": fileURLToPath(new URL('src/utils', import.meta.url)),
      "libs": fileURLToPath(new URL('src/libs', import.meta.url)),
    },
  },

配置路径别名，让你在项目中引用文件时可以写得更简洁、直观，而不必使用长长的相对路径。

你可以在任何组件或文件中这样用：

import { formatDate } from 'utils/date'
import useUserStore from 'store/user'
import sdk from 'libs/sdk'

配置server

server: {
    //本地服务器主机名 配置后可以使用本地网络访问
    host: '0.0.0.0',
    //指定启动端口号
    port: 5000,
    //设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口
    strictPort: false,
    //服务器启动时自动在浏览器中打开应用程序,当此值为字符串时，会被用作 URL 的路径名
    open: false,
    proxy: {
        '/v1': {
            target: 'http://localhost:3099',
            changeOrigin: true,
        }
    }
}

proxy

作用：在开发环境下，将前端请求转发到后端服务器，解决跨域问题。

proxy: {
  '/v1': {
    target: 'http://localhost:3099', // 后端服务地址
    changeOrigin: true,              // 修改请求头的 Origin 为目标地址
    rewrite: path => path.replace(/^\/v1/, '') // 可选：去掉 /v1 前缀
  }
}

• 当前端访问 /v1/xxx 时，它会被转发到后端接口
• rewrite 的作用是把 /v1 去掉，后端只看到 /xxx

预处理css文件

css: {
  preprocessorOptions: {
    scss: {
      javascriptEnabled: true,
      additionalData: `@use "@/assets/styles/main.scss" as *;`
    }
  }
}

• 自动在每个 .scss 文件或 <style lang="scss"> 中引入指定的全局样式文件

• @use 是 Sass 官方推荐的新导入方式（代替 @import）；

• @use "xxx" as *; 表示：把 main.scss 文件中定义的所有变量、mixin、function 等直接“混入”当前作用域；

• @use 更安全、不会重复加载，也能避免命名冲突。

你配置了这一段之后：

// 在任意.vue 或 .scss 文件里
.my-box {
  color: $mainColor; // 不需要自己import main.scss
}

就能直接用 main.scss 里定义的 $mainColor、@mixin 等，全局生效。