vite的vue3项目配置

news2024/10/21 6:12:00

在使用 Vite 进行项目开发时，可以通过配置文件 vite.config.js 或 vite.config.ts 来自定义项目的构建和开发流程。以下是常见的 Vite 项目配置及其说明：

基本配置

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src',  // 路径别名
    },
  },
  server: {
    port: 3000,          // 本地开发服务器端口
    open: true,          // 自动打开浏览器
    proxy: {             // 代理设置
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
  build: {
    outDir: 'dist',      // 构建输出目录
    sourcemap: true,     // 生成 sourcemap 文件
    rollupOptions: {
      output: {
        // 静态资源打包分类
        assetFileNames: 'assets/[name].[hash].[ext]',
        chunkFileNames: 'js/[name].[hash].js',
        entryFileNames: 'js/[name].[hash].js',
      },
    },
  },
});

关键配置详解

  1. 插件系统（plugins）:

    • 在 Vite 中，插件非常重要，@vitejs/plugin-vue 是 Vue 3 项目的核心插件。

  2. 路径别名（resolve.alias）:

    • 通过设置 @ 为 src 的路径别名，简化模块导入时的路径引用。

  3. 开发服务器配置（server）:

    • port: 自定义本地开发环境的端口，默认为 5173。
    • open: 启动开发服务器后自动在浏览器中打开项目。
    • proxy: 解决开发环境跨域问题，设置代理来将 /api 路径重写为目标服务器地址。

  4. 构建配置（build）:

    • outDir: 自定义打包后的输出目录，默认为 dist。
    • sourcemap: 启用源码映射，方便调试生产环境代码。
    • rollupOptions: 用于自定义 Rollup 的打包行为，例如自定义文件名、资源分类等。

其他常用配置

  1. CSS 预处理器支持:
    如果你使用了 Sass 或 Less，可以在 vite.config.js 中配置如下：

    export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
});

  2. 环境变量配置:
    Vite 支持根据不同的环境配置变量，例如 .env、.env.production、.env.development 文件。使用 import.meta.env 访问这些变量。

    # .env 文件
VITE_API_URL=https://api.example.com

    // 在代码中使用
const apiUrl = import.meta.env.VITE_API_URL;

  3. 模块联邦（Module Federation）:
    如果项目需要使用模块联邦，可以通过 vite-plugin-federation 插件来配置。

优化建议

  1. 按需加载: 对于大项目，可以使用 dynamic import 来实现按需加载组件，减少首次加载时间。

    const MyComponent = () => import('@/components/MyComponent.vue');

  2. 代码分割（Code Splitting）: 在 build.rollupOptions 中设置，确保大文件拆分为更小的块。

这就是一个使用 Vite 开发 Vue 项目的基础配置，你可以根据项目需求灵活调整配置文件。

在 Vite 项目中，开发配置和功能，适用于生产环境的优化、代码质量保障、提升开发体验等方面。

1. 动态导入和代码分割（Lazy Loading and Code Splitting）

在生产环境下，按需加载模块有助于减小打包体积和提升页面加载性能。

使用场景：组件按需加载
import { defineAsyncComponent } from 'vue';

// 定义异步组件
const AsyncComponent = defineAsyncComponent(() =>
  import('@/components/AsyncComponent.vue')
);

在路由层面，你可以结合 Vue Router 动态导入组件：

// router/index.js
const routes = [
  {
    path: '/home',
    component: () => import('@/views/Home.vue')  // 按需加载页面组件
  },
];

2. 自动导入（Auto-importing Plugins）

手动引入库或组件可能变得繁琐，尤其是大型项目。你可以使用 unplugin-auto-import 和 unplugin-vue-components 来自动导入 Vue API 和组件。

安装依赖
npm install -D unplugin-auto-import unplugin-vue-components
配置 vite.config.js
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';  // 如果使用Vant

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router'],  // 自动导入Vue相关的API，比如ref、reactive等
      dts: 'src/auto-imports.d.ts',  // 自动生成类型声明文件
    }),
    Components({
      resolvers: [VantResolver()],  // 自动导入Vant组件
      dts: 'src/components.d.ts',
    }),
  ],
});

通过这两个插件，你可以避免在每个文件手动引入 ref、reactive 等，或者显式地导入第三方组件。

3. 环境变量和模式（Env Variables and Mode）

在大型项目中，你可能需要为不同的环境（开发、测试、生产）设置不同的环境变量。Vite 提供了 .env 文件支持。

创建不同的 .env 文件
# .env.development
VITE_API_URL=https://dev.api.example.com

# .env.production
VITE_API_URL=https://prod.api.example.com

在代码中，你可以通过 import.meta.env 访问这些环境变量：

const apiUrl = import.meta.env.VITE_API_URL;

4. 生产环境优化（Production Optimization）

配置 gzip 压缩

启用 gzip 压缩可以减少网络传输的数据大小，提升页面加载速度。

安装 vite-plugin-compression：

npm install -D vite-plugin-compression

配置 vite.config.js：

import compression from 'vite-plugin-compression';

export default defineConfig({
  plugins: [
    vue(),
    compression({
      algorithm: 'gzip',   // 使用gzip压缩
      ext: '.gz',          // 生成的压缩文件扩展名
    }),
  ],
});
配置 CSS 和 JS 压缩

通过优化构建的 CSS 和 JS 文件，减少生产环境的打包体积。Vite 默认使用 Terser 压缩 JS，你可以进行自定义。

export default defineConfig({
  build: {
    terserOptions: {
      compress: {
        drop_console: true,    // 移除console.log
        drop_debugger: true,   // 移除debugger
      },
    },
    cssCodeSplit: true,         // 启用CSS代码分割
  },
});
动态加载 Polyfills

对于旧浏览器的兼容性问题，你可以只在必要时加载 polyfill。使用 vite-plugin-legacy 实现。

安装依赖：

npm install -D @vitejs/plugin-legacy

配置：

import legacy from '@vitejs/plugin-legacy';

export default defineConfig({
  plugins: [
    vue(),
    legacy({
      targets: ['defaults', 'not IE 11'],  // 定义支持的浏览器
    }),
  ],
});

5. 按需国际化（On-demand i18n loading）

在多语言应用中，如果项目有大量的语言包文件，加载所有的语言文件会影响性能。可以按需加载所需的语言包。

const messages = {
  en: () => import('@/locales/en.json'),
  zh: () => import('@/locales/zh.json'),
};

const i18n = createI18n({
  locale: 'en',
  messages: {
    en: async () => await messages.en(),
    zh: async () => await messages.zh(),
  },
});

6. 基于 Monorepo 的多包管理（Monorepo Support）

如果你需要在同一个仓库中管理多个包，可以结合 Yarn workspaces 或 pnpm 的 monorepo 支持。

配置 pnpm-workspace.yaml
packages:
  - 'packages/*'
  - 'apps/*'

然后在 vite.config.js 中配置路径：

export default defineConfig({
  resolve: {
    alias: {
      '@core': '/packages/core/src',  // 例如 Monorepo 中的核心包
    },
  },
});

7. SSR（Server-Side Rendering）配置

如果你需要服务端渲染，Vite 提供了与 SSR 的良好集成。可以使用 vite-plugin-ssr 结合。

安装依赖：

npm install vite-plugin-ssr

配置 vite.config.js：

import ssr from 'vite-plugin-ssr/plugin';

export default defineConfig({
  plugins: [vue(), ssr()],
  build: {
    ssr: true,  // 开启SSR构建
  },
});

8. 测试和代码质量保障（Testing and Linting）

ESlint 和 Prettier

确保代码风格一致性，使用 ESLint 和 Prettier。

安装依赖：

npm install -D eslint eslint-plugin-vue prettier eslint-config-prettier

配置 .eslintrc.js:

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'prettier'
  ],
  rules: {
    'vue/multi-word-component-names': 'off',
  },
};
Vitest 测试

Vite 官方推荐使用 Vitest 来进行单元测试。

安装依赖：

npm install -D vitest

在 vite.config.js 中配置 Vitest：

import { defineConfig } from 'vite';

export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
  },
});

运行测试：

npx vitest

结论

这些高级配置涵盖了性能优化、开发效率提升和项目维护性保障等各个方面。在实际项目中，可以根据具体需求选择合适的配置来最大化项目的开发效率和生产性能。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2219852.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

线性代数基础02

线性代数基础02

目录 1.向量 1.1向量的定义 1.2向量的运算 1.2.1向量加法 1.2.2向量数乘 1.2.3向量点积 1.3矩阵的特征值和特征向量 1.4向量的模 1.4.1向量的模的定义 1.4.2向量的模的几何解释 1.4.3向量的模的性质 1.5向量的内积 1.5.1向量的内积的定义 1.5.2向量的内积的几何解…
阅读更多...
【Linux】进程概念 PCB结构体 fork创建子进程

【Linux】进程概念 PCB结构体 fork创建子进程

🪐🪐🪐欢迎来到程序员餐厅💫💫💫 主厨：邪王真眼 主厨的主页：Chef‘s blog 所属专栏：青果大战linux 总有光环在陨落，总有新星在闪烁 每日小感慨&#xff…
阅读更多...
UDP/TCP协议详解

UDP/TCP协议详解

目录 一,自定义应用层协议: 1)xml 2),JSON 3),yml 4),google protobuffer 二,传输层UDP/TCP: UDP协议: TCP协议: TCP的核心机制一:确认应答 TCP核心机制二:超时重传 TCP核心机制三:连接管理 TCP核心机制四:滑动窗口 TCP核心机制五:流量控制 TCP核心机制六:拥塞控制…
阅读更多...
c++ pdf文件提取txt文本示例

c++ pdf文件提取txt文本示例

最近抽空采用之前封装的接口将pdf文件提取出txt文本，顺利完成，界面如下所示： 提起的效果如下所示： 输出的txt文本内容如下： 下载链接：https://download.csdn.net/download/u011269801/89905548
阅读更多...
AI 3D拣选系统行业分析：物流行业是最主要的需求来源

AI 3D拣选系统行业分析：物流行业是最主要的需求来源

AI 3D拣选系统是一种集成了先进传感技术、机器人技术和计算机视觉技术的自动化分拣解决方案。它能够在三维空间内快速、准确地识别和分拣各种形状、大小和材质的物品，大大提高了物流效率和准确性。该系统通过高精度的3D传感器和先进的视觉算法，能够实时捕…
阅读更多...
【某农业大学计算机网络实验报告】实验五 TCP 运输连接管理

【某农业大学计算机网络实验报告】实验五 TCP 运输连接管理

实验目的： 熟悉 TCP 通信的三个阶段：通过此次实验，结合理论课知识深入理解并熟悉 TCP 通信的三个主要阶段，即连接建立（SYN-SYN），数据传输（DATA），以及连接释放…
阅读更多...
【论文速读】Prompt Tuning：The Power of Scale for Parameter-Effificient Prompt Tuning

【论文速读】Prompt Tuning：The Power of Scale for Parameter-Effificient Prompt Tuning

arxiv：2104.08691v2 摘要 在这项工作中，我们探索了“prompt tuning（提示调优）”，这是一种简单而有效的机制，用于学习“soft prompts（软提示）”，以条件下冻结的语言模型…
阅读更多...
Golang | Leetcode Golang题解之第485题最大连续1的个数

Golang | Leetcode Golang题解之第485题最大连续1的个数

题目： 题解： func findMaxConsecutiveOnes(nums []int) (maxCnt int) {cnt : 0for _, v : range nums {if v 1 {cnt} else {maxCnt max(maxCnt, cnt)cnt 0}}maxCnt max(maxCnt, cnt)return }func max(a, b int) int {if a > b {return a}return …
阅读更多...
矩阵matrix

矩阵matrix

点积 在 NumPy 中，dot 是矩阵或向量的点积（dot product）操作。 假设有两个向量a和 b，它们的点积定义为对应元素相乘，然后求和。公式如下： 例子： 点积的计算步骤是： 因此&#xf…
阅读更多...
【动态规划】【路径问题】下降路经最小和、最小路径和、地下城游戏

【动态规划】【路径问题】下降路经最小和、最小路径和、地下城游戏

4. 下降路径最小和 931. 下降路径最小和 算法原理 确定状态表示 dp[i][j] 表示：到达 [i, j] 位置，最小的下降路径 状态转移方程 dp[i][j] 从 [i-1, j-1] 到达 [i, j] > dp[i-1][j-1] m[i][j]从 [i-1, j] 到达 [i, j] > dp[i-1][j] m[i][j]从 …
阅读更多...
leetcode_887_鸡蛋掉落___循序渐进的分析

leetcode_887_鸡蛋掉落___循序渐进的分析

分析：对于一组[n,k] 在一次尝试中选择了在dep层测试 其可以分为 如果在dep层炸了: 则变成了[dep-1,k-1]读作在dep-1层用k-1个鸡蛋来找鸡蛋的极限所需次数如果在dep层没炸: 则变成了[n-dep,k]读作在n-dep层用k个鸡蛋来找鸡蛋的极限所需次数可以发现这都是子问题的…
阅读更多...
【Javaee】网络编程-TCP Socket

【Javaee】网络编程-TCP Socket

前言 前文中我们介绍了UDP Socket相关的构造方法和方法，并实现了UDP的回显服务器和客户端。 本篇将介绍TCP Socket，并使用TCP Socket api实现服务器和客户端的通信 一.TCP Socket的常见方法 1.ServerSocket ServerSocket是创建TCP服务端Socket的API …
阅读更多...
线程池：高效管理并发任务的利器

线程池：高效管理并发任务的利器

线程池：高效管理并发任务的利器 什么是线程池？ 线程池（Thread Pool）是Java并发编程中的一种设计模式，旨在通过重复利用线程资源，来提高程序执行效率。线程池的主要思想是提前创建一组可供使用的线程&#…
阅读更多...
归一化输入

归一化输入

当输入的不同的特征取值范围差异过大，取得对应参数差别也会很大，在对参数进行优化的过程中，参数小的维度步长较小，参数大的维度步长较大，优化过程中路径曲折，将输入归一化，使特征取值范围差别小…
阅读更多...
相控阵雷达电特性matlab模拟与仿真,带GUI界面,对比有限扫描阵,稀疏阵,多波束阵,共形阵等

相控阵雷达电特性matlab模拟与仿真,带GUI界面,对比有限扫描阵,稀疏阵,多波束阵,共形阵等

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 相控阵雷达作为一种先进的雷达技术，具有高分辨率、多功能、快速扫描等优点，在军事和民用领域都有着广泛的应用。相控阵雷达的天线系统是其核心组成部分…
阅读更多...
C#线性变换——缩放

C#线性变换——缩放

前言： 大家好，我是上位机马工，硕士毕业4年年入40万，目前在一家自动化公司担任软件经理，从事C#上位机软件开发8年以上！我们在C#开发中经常需要对平面中的坐标进行一些变换，比如缩放、旋转等&…
阅读更多...
数据结构：二叉树、堆

数据结构：二叉树、堆

目录 一.树的概念 二、二叉树 1.二叉树的概念 2.特殊类型的二叉树 3.二叉树的性质 4.二叉树存储的结构 三、堆 1.堆的概念 2.堆的实现 Heap.h Heap.c 一.树的概念 注意，树的同一层中不能有关联，否侧就不是树了，就变成图了&#xff…
阅读更多...
PCL 点云配准 Trimed-ICP算法（精配准

PCL 点云配准 Trimed-ICP算法（精配准

目录 一、概述 1.1原理 1.2实现步骤 1.3应用场景 二、代码实现 2.1关键函数 2.1.1 perform_standard_icp 函数 2.1.2 perform_trimmed_icp 函数 2.1.3 visualize_registration 函数 2.2完整代码 PCL点云算法汇总及实战案例汇总的目录地址链接： PCL点云算…
阅读更多...
国庆旅游高峰期，如何利用可视化报表来展现景区、游客及消费数据

国庆旅游高峰期，如何利用可视化报表来展现景区、游客及消费数据

国庆黄金周，作为国内旅游市场的年度盛宴，总是吸引着无数游客的目光。今年，随着旅游市场的强劲复苏，各大景区又再次迎来游客流量的高峰。全国国内出游7.65亿人次，同比增长5.9%，国内游客出游总花费7008.17亿元…
阅读更多...
大型企业软件开发是什么样子的？ - Web Dev Cody

大型企业软件开发是什么样子的？ - Web Dev Cody

引用自大型企业软件开发是什么样子的？ - Web Dev Cody_哔哩哔哩_bilibili 一般来说 学技术的时候 我们会关注 开发语言特性 ，各种高级语法糖，底层技术 但是很少有关注到企业里面的开发流程，本着以终为始（以就业为导向…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023