vite的vue3项目配置

embedded/2024/10/21 6:54:50/

在使用 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';  // 如果使用Vantexport 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.logdrop_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.ppmy.cn/embedded/129201.html

相关文章

使用LLM和RAG进行数据库查询（文本到SQL）的四大挑战及解决方案

使用LLM和RAG进行数据库查询（文本到SQL）的四大挑战及解决方案

大型语言模型（LLM）的出现展示了机器理解自然语言的能力。这些能力帮助工程师完成了许多令人惊叹的工作，比如编写代码文档和代码审查，而最常见的用例之一是代码生成；GitHub Copilot展示了AI理解工程师代码生成意图的能力…
阅读更多...
诊断知识：NRC78(Response Pending)的回复时刻

诊断知识：NRC78(Response Pending)的回复时刻

文章目录 前言NRC78的使用场景客户需求解读Autosar Dcm中的定义工具链中的配置总结 前言 在项目开发过程中，客户变更需求，是关于NRC78的回复时间点的，该需求在Autosar Dem中也有对应的参数，DcmTimStrP2ServerAdjust（针…
阅读更多...
软件开发的项目管理的风险有哪些？

软件开发的项目管理的风险有哪些？

软件开发项目管理中可能面临的风险： 序号风险类型描述1需求不明确项目需求没有被清晰定义或频繁变更，导致开发方向不明确或需要重做工作。2技术风险采用的技术可能存在缺陷或不兼容，或者团队缺乏必要的技术技能。3资源不足项目可能因为人力…
阅读更多...
Git的认识及基本操作

Git的认识及基本操作

目录 一:Git的基本认识 二:Git的安装 三:Git的基本操作 1.创建本地仓库 2.配置Git 3.⼯作区、暂存区、版本库 4. 修改文件 5.版本回退 6.撤销修改 7.删除文件 一:Git的基本认识 1.实例引入 在日常当中我们常常会遇到这样的事，就是在做实验报告或者课设…
阅读更多...
RTMP协议分析

RTMP协议分析

理论 总体介绍 RTMP协议是应⽤层协议，是要靠底层可靠的传输层协议（通常是TCP）来保证信息传输的可靠性的。在基于传输层协议的链接建⽴完成后，RTMP协议也要客户端和服务器通过“握⼿”来建⽴基于传输层链接之上的RTMP Connection链…
阅读更多...
如何将LiDAR坐标系下的3D点投影到相机2D图像上

如何将LiDAR坐标系下的3D点投影到相机2D图像上

将激光雷达点云投影到相机图像上做数据层的前融合，或者把激光雷达坐标系下标注的物体点云的3d bbox投影到相机图像上画出来，都需要做点云3D点坐标到图像像素坐标的转换计算，也就是LiDAR 3D坐标转像素坐标。 看了网上一些文章都存在有错误或者…
阅读更多...
【微信小程序_17_生命周期】

【微信小程序_17_生命周期】

摘要：本文介绍了小程序的生命周期，包括生命周期的定义、分类、生命周期函数等内容。生命周期分为应用生命周期和页面生命周期，生命周期函数由小程序框架提供，会按次序自动执行，开发人员可利用这些函数在特定时间点执行操作，如在页面加载时初始化数据。 微信小程序_17_生命…
阅读更多...
Centos7升级到openssh9.9

Centos7升级到openssh9.9

openssh9.9 是2024.9.20出的最新版ssh。因为客户扫描出一大堆centos7的漏洞，全是这个openssh的，好多补丁，所以索性升级到最新版。 需要自己制作rpm包，这个我是不懂，照这个来： Linux服务器升级openssh9.9最…
阅读更多...
最新文章

Copyright @ 2022~2023