Vue3+ElementPlus的常用Vite配置

原创已于 2024-09-25 18:36:58 修改 · 2.3k 阅读

44 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript #前端

于 2024-09-25 18:14:11 首次发布

前端同时被 2 个专栏收录

3 篇文章

订阅专栏

2 篇文章

订阅专栏

1. 导入模块

import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

fileURLToPath 和 URL：用于处理文件路径。
defineConfig：Vite 提供的函数，用于定义配置。
@vitejs/plugin-vue：支持 Vue 3 的插件。
unplugin-auto-import：自动导入 API 的插件，减少手动导入的工作。
unplugin-vue-components：自动注册 Vue 组件的插件。
ElementPlusResolver：用于自动导入 Element Plus 组件的解析器。

2. Vite 配置

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],

plugins：配置使用的插件。
- vue()：启用 Vue 支持。
- AutoImport：配置自动导入，使用 Element Plus 组件。
- Components：配置自动注册组件，同样使用 Element Plus 解析器。

3. 解析配置

  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
    extensions: ['.mjs', '.js', '.mts', '.ts', ".json"],
  },

alias：设置路径别名，@ 指向 src 目录，方便引用。
extensions：指定可以省略后缀的文件类型。

4. 环境变量定义

  define: {
    "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
  },

define：用于定义全局常量，这里定义了 process.env.NODE_ENV，以便在代码中使用。

5. 开发服务器配置

  server: {
    port: 5173,
    strictPort: false,
    open: true,
    cors: true,
    hmr: {
      protocol: 'ws',
      port: 3001,
      host: 'localhost',
    },
    proxy: {
      "/api": {
        target: "http://localhost:5000",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },

port：开发服务器运行的端口。
strictPort：如果端口被占用，是否严格报错。
open：启动后自动打开浏览器。
cors：启用 CORS 支持。
hmr：热模块替换配置，指定协议、端口和主机名。
proxy：设置代理，将 /api 的请求转发到 http://localhost:5000，并重写路径。

6. 构建配置

  build: {
    outDir: "dist",
    sourcemap: true,
    emptyOutDir: true,
    assetsDir: "assets",
    cssCodeSplit: true,
    minify: "terser",
    chunkSizeWarningLimit: 500,
    rollupOptions: {
      input: "./index.html",
      output: {},
      plugins: [],
    },
  },

outDir：构建输出目录。
sourcemap：生成源映射文件，方便调试。
emptyOutDir：构建前清空输出目录。
assetsDir：静态资源目录。
cssCodeSplit：启用 CSS 代码分割。
minify：使用 Terser 进行代码压缩。
chunkSizeWarningLimit：设置 chunk 大小警告限制。
rollupOptions：Rollup 的配置选项，指定入口文件和输出选项。

7. CSS 预处理器选项

  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/styles/variables.scss";`,
      },
    },
  },

preprocessorOptions：配置 CSS 预处理器，这里为 SCSS 添加全局变量文件的导入。

8. 依赖优化配置

  optimizeDeps: {
    include: [],
    exclude: [],
  },

optimizeDeps：优化依赖的配置，可以指定需要包含或排除的依赖。

9. JSON 导入配置

  json: {
    namedExports: true,
  },

json：配置 JSON 文件的导入方式，启用命名导出。

10. 公共目录和资产包含

  publicDir: 'public',
  assetsInclude: ['.svg', '.png', '.jpg'],
});

publicDir：指定公共资源目录，Vite 会将该目录下的文件直接复制到输出目录。
assetsInclude：指定需要包含的资产文件类型。
好的，我们可以进一步深入探讨这个 Vite 配置文件的各个部分，以及如何根据项目需求进行调整和优化。

11. 插件的使用和配置

AutoImport 和 Components 插件

这两个插件通过 ElementPlusResolver 提供了对 Element Plus 组件库的支持。它们的主要作用是：

AutoImport：自动导入常用 API，比如 Vue 的 ref、reactive 等，减少手动导入的工作量。
Components：自动注册 Element Plus 组件，开发者无需在每个文件中手动导入和注册组件，提升开发效率。

自定义插件

在 rollupOptions.plugins 中，你可以添加自定义的 Rollup 插件，以满足特定的构建需求。例如，添加压缩、图像优化、代码分割等功能。

12. 开发服务器的扩展

HMR 配置

热模块替换（HMR）是一个非常重要的功能，能够在不刷新整个页面的情况下更新模块。这里的配置允许你自定义 HMR 的协议、端口和主机名，适应不同的开发环境。

代理设置

代理配置可以帮助你在开发环境中解决跨域问题。你可以根据需要添加更多的代理路径，例如 /auth、/assets 等，确保后端 API 的请求能够顺利转发。

13. 构建优化

输出目录和文件名

你可以根据项目需求自定义输出目录和文件名。例如，使用哈希值来命名文件，以便于缓存控制：

output: {
  entryFileNames: '[name].[hash].js',
  chunkFileNames: '[name].[hash].js',
  assetFileNames: '[name].[hash][extname]',
}

代码分割

通过设置 cssCodeSplit 和合理的 chunkSizeWarningLimit，你可以优化应用的加载性能，确保用户在访问时获得更快的体验。

14. CSS 预处理器的灵活性

SCSS 配置

在 scss 的 additionalData 中，你可以引入全局样式、变量和 mixins。这使得在项目中的任意 SCSS 文件中都可以直接使用这些全局样式，而无需在每个文件中重复导入。

15. 依赖优化

优化依赖的包含和排除

在 optimizeDeps 中，你可以手动控制哪些依赖需要预构建，哪些依赖需要排除。这在处理大型项目时，可以有效减少构建时间。

16. JSON 导入的灵活性

命名导出

启用 namedExports 选项后，你可以像导入模块一样导入 JSON 文件中的特定字段，这使得数据的使用更加灵活和直观。

17. 公共资源的管理

publicDir

指定的 publicDir 目录中的文件会在构建时直接复制到输出目录。这对于存放静态文件（如图片、字体等）非常有用，开发者可以直接引用这些文件。

18. 资产类型的支持

assetsInclude

通过设置 assetsInclude，你可以指定哪些类型的文件（如 .svg、.png、.jpg）被视为资产。这在处理图像文件时非常重要，确保这些文件能够被正确处理和引入。

最终配置

import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
    extensions: ['.mjs', '.js', '.mts', '.ts', ".json"],
  },
  define: {
    "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
  },
  server: {
    // host: "0.0.0.0",
    port: 5173,
    strictPort: false,
    open: true,
    cors: true,
    // hmr: {
    //   protocol: 'ws',
    //   port: 3001,
    //   host: 'localhost', // 指定 HMR 主机名
    // },
    // fs: {
    //   allow: ['./src'], // 允许访问 src 文件夹
    // },
    // middlewareMode: true,
    proxy: {
      "/api": {
        target: "http://localhost:5000",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
      // '/auth': {
      //   target: 'http://localhost:6000',
      //   changeOrigin: true,
      //   rewrite: (path) => path.replace(/^\/auth/, ''),
      // },
      // '/assets': {
      //   target: 'http://localhost:7000',
      //   changeOrigin: true,
      //   rewrite: (path) => path.replace(/^\/assets/, ''),
      // },
    },
  },
  build: {
    outDir: "dist",
    sourcemap: true,
    emptyOutDir: true,
    assetsDir: "assets",
    cssCodeSplit: true,
    minify: "terser",
    chunkSizeWarningLimit: 500,
    rollupOptions: {
      input: "./index.html",
      output: {
        // 自定义输出选项
      },
      // 可以添加自定义插件
      plugins: [
        // 例如，添加一些 Rollup 插件
      ],
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/styles/variables.scss";`,
      },
    },
  },
  optimizeDeps: {
    include: [],
    exclude: [],
  },

  json: {
    // import { name } from './data.json';
    // console.log(name); // 输出: John Doe
    namedExports: true, // 启用命名导出
  },
  publicDir: 'public',
  assetsInclude: ['.svg', '.png', '.jpg'],
  

});