(工程化) vite配置详细介绍

最新推荐文章于 2025-03-19 18:08:44 发布
最新推荐文章于 2025-03-19 18:08:44 发布
阅读量1.1k 收藏 13
点赞数 12
分类专栏： 工程化 文章标签： vite 前端 vue react javascript web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43258522/article/details/145173249
版权

以下是更详细的 Vite 配置指南，涵盖了更多高级配置项和实际应用场景，帮助您全面掌握 Vite 的配置能力。

1. 安装与初始化

使用以下命令创建 Vite 项目：

npm create vite@latest
# 或
yarn create vite

选择框架（如 Vue、React）和模板后，Vite 会自动生成项目结构。

2. 项目结构

典型的 Vite 项目结构如下：

my-vite-project/
├── public/              # 静态资源（直接复制到输出目录）
├── src/                 # 源代码
│   ├── assets/          # 静态资源（如图片、字体）
│   ├── components/      # 组件
│   ├── styles/          # 全局样式
│   ├── App.vue          # 根组件
│   └── main.js          # 入口文件
├── index.html           # 入口 HTML 文件
├── vite.config.js       # Vite 配置文件
├── package.json         # 项目依赖
└── .env                 # 环境变量文件

3. Vite 配置文件 (vite.config.js)

Vite 的配置文件支持 JavaScript 或 TypeScript。以下是一个更全面的配置示例：

import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue'; // Vue 插件
import react from '@vitejs/plugin-react'; // React 插件
import { fileURLToPath, URL } from 'node:url'; // 处理路径
import legacy from '@vitejs/plugin-legacy'; // 兼容旧版浏览器
import { visualizer } from 'rollup-plugin-visualizer'; // 构建分析工具

export default defineConfig(({ mode }) => {
  // 加载环境变量
  const env = loadEnv(mode, process.cwd(), '');

  return {
    // 插件配置
    plugins: [
      vue(), // Vue 插件
      react(), // React 插件
      legacy({ // 兼容旧版浏览器
        targets: ['defaults', 'not IE 11'],
      }),
      visualizer({ // 构建分析
        open: true,
        filename: 'bundle-analysis.html',
      }),
    ],

    // 开发服务器配置
    server: {
      port: 3000, // 端口号
      open: true, // 自动打开浏览器
      proxy: { // 代理配置
        '/api': {
          target: env.VITE_API_BASE_URL || 'http://localhost:5000', // 代理目标
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
      },
      cors: true, // 启用 CORS
      hmr: { // 热模块替换配置
        overlay: true,
      },
    },

    // 构建配置
    build: {
      outDir: 'dist', // 输出目录
      assetsDir: 'assets', // 静态资源目录
      sourcemap: true, // 生成 sourcemap
      minify: 'terser', // 代码压缩工具
      terserOptions: { // Terser 配置
        compress: {
          drop_console: true, // 移除 console.log
          drop_debugger: true, // 移除 debugger
        },
      },
      rollupOptions: { // Rollup 配置
        output: {
          manualChunks: { // 手动分块
            vendor: ['vue', 'vue-router', 'axios'], // 第三方库单独打包
          },
        },
      },
    },

    // 路径别名
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)), // 路径别名
      },
      extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'], // 自动解析扩展名
    },

    // CSS 配置
    css: {
      preprocessorOptions: { // 预处理器配置
        scss: {
          additionalData: `@import "@/styles/variables.scss";`, // 全局引入 SCSS 变量
        },
        less: {
          modifyVars: { // 修改 Less 变量
            'primary-color': '#1890ff',
          },
          javascriptEnabled: true,
        },
      },
      modules: { // CSS Modules 配置
        localsConvention: 'camelCase',
      },
    },

    // 环境变量配置
    envPrefix: 'VITE_', // 环境变量前缀
    define: { // 全局变量替换
      __APP_VERSION__: JSON.stringify(env.npm_package_version),
    },

    // 优化配置
    optimizeDeps: {
      include: ['vue', 'vue-router', 'axios'], // 预构建依赖
      exclude: ['some-package'], // 排除依赖
    },
  };
});

4. 常用配置项详解

插件配置 (plugins)
  • @vitejs/plugin-vue：Vue 支持。
  • @vitejs/plugin-react：React 支持。
  • @vitejs/plugin-legacy：为旧版浏览器提供支持。
  • rollup-plugin-visualizer：构建分析工具。
开发服务器配置 (server)
  • port：指定开发服务器端口。
  • open：是否自动打开浏览器。
  • proxy：配置代理，解决跨域问题。
  • cors：启用跨域资源共享。
  • hmr：热模块替换配置。
构建配置 (build)
  • outDir：指定构建输出目录。
  • assetsDir：静态资源存放目录。
  • sourcemap：是否生成 sourcemap 文件。
  • minify：代码压缩工具，可选 terser 或 esbuild。
  • rollupOptions：Rollup 打包配置，支持手动分块。
路径别名 (resolve.alias)

通过 alias 配置路径别名，简化模块导入。

CSS 配置 (css)
  • preprocessorOptions：配置 CSS 预处理器（如 SCSS、Less）。
  • modules：启用 CSS Modules。
环境变量 (env)
  • envPrefix：指定环境变量前缀（默认为 VITE_）。
  • define：定义全局变量。
依赖优化 (optimizeDeps)
  • include：预构建依赖。
  • exclude：排除依赖。

5. 环境变量

Vite 使用 .env 文件管理环境变量：

  • .env：默认环境变量。
  • .env.development：开发环境变量。
  • .env.production：生产环境变量。

示例 .env 文件：

VITE_API_BASE_URL=https://api.example.com
VITE_APP_TITLE=My Vite App

在代码中访问：

console.log(import.meta.env.VITE_API_BASE_URL);

6. TypeScript 支持

Vite 默认支持 TypeScript。只需安装 TypeScript 并创建 tsconfig.json 文件：

npm install typescript --save-dev

示例 tsconfig.json：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": ["src"]
}

7. 部署

构建项目：

npm run build

构建结果会输出到 dist 目录，可直接部署到服务器。

8. 示例代码

以下是一个完整的 vite.config.js 示例：

import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import { fileURLToPath, URL } from 'node:url';
import legacy from '@vitejs/plugin-legacy';
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');

  return {
    plugins: [
      vue(),
      legacy({
        targets: ['defaults', 'not IE 11'],
      }),
      visualizer({
        open: true,
        filename: 'bundle-analysis.html',
      }),
    ],
    server: {
      port: 3000,
      open: true,
      proxy: {
        '/api': {
          target: env.VITE_API_BASE_URL || 'http://localhost:5000',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
      },
    },
    build: {
      outDir: 'dist',
      assetsDir: 'assets',
      sourcemap: true,
      minify: 'terser',
      rollupOptions: {
        output: {
          manualChunks: {
            vendor: ['vue', 'vue-router', 'axios'],
          },
        },
      },
    },
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@/styles/variables.scss";`,
        },
      },
    },
    envPrefix: 'VITE_',
  };
});

总结

通过以上详细配置，您可以充分利用 Vite 的强大功能，优化开发体验和项目性能。根据项目需求灵活调整配置，可以显著提升开发效率和构建质量。

十二、vite配置详解
张先森的博客
08-25 1万+
vite配置详解
工程化:vite4和vue3里面的css.module模块化的研究
峰会路转的博客
04-26 649
如何在vite里面写css的时候vite自动给我们加上这种hash,来进行样式的隔离，防止污染呢。
vite配置
qq_47040462的博客
07-03 4773
主要配置有：root(源文件路径)、define（全局常量）、resolve（模块解析）、base(静态文件路径)等。以下也是常用的配置（实际根据具体项目而定）
vite4 基础配置（详细篇）
m0_72348850的博客
06-03 537
如果代理目标是 HTTPS，就需要忽略安全证书校验，否则会出现接口状态一直 pending。忽略安全证书校验需要在 proxy 下添加。上面这段 vite 配置，意思是在本地启动一个 node server， 端口是。如果配置后引用组件没有路径提示，下载 Path Intellisense 插件。字段，告诉 proxy 是否开启安全证书校验，默认是开启。开始 | Vite 官方中文文档 (vitejs.cn)在 tsconfig.son 下配置。开头的接口时，都会自动代理到。一、配置 proxy。
Vite基本知识
最新发布
太阳与星辰的博客
03-19 827
Vite基本知识
vite基本配置教程
热门推荐
夏天的博客
10-14 2万+
最近做项目要求将webpack打包方式换成vite，下面将详细讲解一下配置vite需要改动的东西，以及踩的坑。vite官网：https://vitejs.cn。
【Vite】配置文件详解
lph159的博客
09-21 3710
Vite 是一款由尤雨溪（Vue.js 作者）开发的构建工具，专为现代前端项目而设计。极速启动：Vite 利用浏览器原生支持的 ES 模块，在开发环境中无需打包即可启动服务，极大提升了项目启动速度。模块热更新（HMR）：Vite 支持基于原生 ESM 的模块热替换，实现了快速、无感知的开发体验。高效构建：Vite 使用 Rollup 进行生产构建，支持按需加载和代码分割，提供了优化的生产环境构建。你也可以创建自定义插件，通过resolveIdloadtransform。
vite常用配置
weixin_63443072的博客
10-16 8833
root 是项目根路径，可以是绝对路径，一般配合fs.strict来限制访问root以外的路径。
vite基本配置
weixin_45732091的博客
07-18 734
vite.config.js基本配置。
vite完整配置项
m0_60508458的博客
04-16 2676
【代码】vite完整配置项。
Vite 使用学习指南
qq_34185872的博客
05-29 3150
支持的框架不同：Vite 支持多种前端框架，包括 Vue、React、Angular 等，而 webpack 则需要通过相应的 loader 和 plugin 来支持不同的框架。构建方式不同：Vite 采用了基于浏览器原生 ES 模块的开发模式，可以在开发时快速启动应用，减少了冷启动时间，而 webpack 则是将所有模块打包到一个文件中。插件开发：Vite 提供了丰富的插件 API，可以通过编写插件来扩展 Vite 的功能，例如添加自定义的文件类型、自定义处理器、自定义中间件等。
Vue3通过Vite实现工程化
weixin_44201223的博客
05-21 644
Vue
vue3 + ts + vite 工程化开发Tampermonkey【油猴、篡改猴】脚本全部源代码
12-12
本项目“vue3 + ts + vite 工程化开发Tampermonkey【油猴、篡改猴】脚本全部源代码”融合了上述技术，旨在提供一套完整的解决方案，以工程化的方式开发Tampermonkey脚本。Tampermonkey是一个非常流行的用户脚本管理...
前端工程化回顾-vite 构建神器
qq_30519365的博客
01-03 532
vite vue3 构建工具已经 打包优化
《从零开始学习Vite》 第二章：接入 CSS 工程化方案
vettel的博客
05-24 1181
CSS 方案是前端工程化必不可缺的，在最原始的开发阶段都是手写原生的 CSS，但原生 CSS 存在浏览器兼容问题、开发体验差、样式污染、打包产物体积过大等诸多问题，因此社区出现了不少 CSS 工程化解决方案，有CSS 预处理器、CSS Modules、PostCSS 、CSS in JS 和 CSS 原子化框架，下面我们将在 Vite 中落地这些 CSS 工程化方案。
Vite的常见配置选项
m0_46543935的博客
07-16 2823
vite defineConfig Options 说明
Vite 配置：这些配置日常开发够用了！
一只小松鼠_的博客
02-26 1936
相信大部分兄弟都体验过Vite了，都知道它很快。在学习的时候，官网上的各种配置也是看的眼花缭乱，不知道哪些是必要掌握的。为了提高效率，我把常用的一些配置梳理一下，希望对大家有所帮助。
Vite 基础配置
2302_77862232的博客
10-22 1428
如果配置文件需要基于（serve或build）命令或者不同的。
vue3 vite env配置代理
03-15
### Vue3 项目中使用 Vite 配置环境变量及设置代理 #### 环境变量配置 为了在 Vue3 项目中正确使用 Vite 的环境变量功能，需按照以下方式操作： 1. **创建 `.env` 文件** 在项目的根目录下分别创建用于不同模式的环境变量文件，例如 `.env.development` 和 `.env.production`。这些文件中的变量名必须以 `VITE_` 开头才能被加载到环境中[^2]。 示例： ```plaintext # .env.development VITE_APP_TITLE=Development Environment VITE_API_URL=http://localhost:8080/api # .env.production VITE_APP_TITLE=Production Environment VITE_API_URL=https://api.example.com/ ``` 2. **修改 `vite.config.ts` 加载环境变量** 使用 Vite 提供的 `loadEnv` 方法，在构建过程中动态加载对应的环境变量文件。此方法会根据当前的工作模式自动选择合适的 `.env.*` 文件[^1]。 修改后的 `vite.config.ts` 示例代码如下： ```typescript import { defineConfig, loadEnv } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig(({ mode }) => { const env = loadEnv(mode, process.cwd(), ''); return { plugins: [vue()], define: { __APP_TITLE__: JSON.stringify(env.VITE_APP_TITLE), __API_URL__: JSON.stringify(env.VITE_API_URL), }, }; }); ``` 3. **访问环境变量** 在 Vue 组件或其他 JavaScript/TypeScript 文件中可以通过 `import.meta.env` 访问已定义的环境变量[^3]。 示例： ```javascript console.log(import.meta.env.VITE_APP_TITLE); // 输出应用标题 console.log(import.meta.env.VITE_API_URL); // 输出 API 地址 ``` --- #### 设置代理配置 当开发环境下遇到跨域请求问题时，可以利用 Vite 的内置服务器代理功能解决这一需求。 1. **调整 `vite.config.ts` 中的 proxy 配置** 将目标接口地址映射至本地服务端口上，从而绕过浏览器同源策略限制。 更新后的 `server.proxy` 部分示例代码如下： ```typescript import { defineConfig, loadEnv } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig(({ mode }) => { const env = loadEnv(mode, process.cwd(), ''); return { plugins: [vue()], server: { port: 3000, proxy: { '/api': { target: env.VITE_API_URL || 'http://localhost:8080', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ''), }, }, }, }; }); ``` 2. **测试代理效果** 启动开发服务器后尝试调用 `/api/*` 接口路径，实际会被转发到指定的目标 URL 上完成数据交互。 --- ### 总结 上述流程涵盖了从环境变量管理到开发阶段处理跨域请求的核心步骤。通过合理运用 Vite 工具链的功能特性，能够显著提升前端工程化水平并简化日常编码过程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xluo1715

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值