**@vitejs/plugin-vue2 技术文档**

@vitejs/plugin-vue2 技术文档

【免费下载链接】vite-plugin-vue2 Vite plugin for Vue 2.7 项目地址: https://gitcode.com/gh_mirrors/vit/vite-plugin-vue2

欢迎来到 @vitejs/plugin-vue2 的详细技术指南。本文档旨在帮助开发者快速理解和应用这个专为Vue 2.x设计的Vite插件，尽管请注意Vue 2已经到达其生命周期末期，此插件的维护也相应减少。

安装指南

要开始使用 @vitejs/plugin-vue2，首先确保您的环境已安装Node.js。然后，在您的项目目录下执行以下命令来安装该插件：

npm install --save-dev @vitejs/plugin-vue2

或者如果您偏好Yarn：

yarn add --dev @vitejs/plugin-vue2

项目使用说明

一旦插件安装完成，您需要在Vite的配置文件vite.config.js中启用它。基本配置非常简单：

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

export default defineConfig({
  plugins: [vue()],
});

这段代码告诉Vite使用@vitejs/plugin-vue2处理Vue 2.x单文件组件（SFC）。

项目API使用文档

配置选项 (Options)

@vitejs/plugin-vue2 提供了一系列可选配置参数，以微调编译过程：

• include: 指定要包含转换的文件模式。
• exclude: 指定应排除不进行转换的文件模式。
• isProduction: 控制生产环境下的特定行为，默认是通过Vite环境变量自动设置。
• script, template, style: 分别为SFC中的脚本、模板和样式块提供编译选项。

例如，自定义模板编译选项：

import vue from '@vitejs/plugin-vue2';

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {}, // 在这里添加任何vue/compiler-sfc支持的编译器选项
        transformAssetUrls: {}, // 自定义资产URL转换规则
      },
    }),
  ],
};

资产URL处理

该插件会自动将SFC模板内的静态资源URL转换为ESM导入。这意味着图片、字体等可以直接在模板中引用，并自动处理为模块导入。

<!-- 原始模板 -->
<img src="./logo.png" />

<!-- 编译后效果 -->
<script setup>
import logo from './logo.png';
</script>

<img :src="logo" />

转换自定义块示例

对于Vue的i18n或其他自定义块处理，可以创建一个自定义插件，并结合使用@vitejs/plugin-vue2：

import vue from '@vitejs/plugin-vue2';

// 自定义i18n处理插件
const vueI18nPlugin = {
  name: 'vue-i18n-transformer',
  transform(code, id) {
    if (!/vue&type=i18n/.test(id)) return;
    if /\.ya?ml$/.test(id)) {
      code = JSON.stringify(require('js-yaml').load(code.trim()));
    }
    return `export default Comp => { Comp.i18n = ${code}; }`;
  },
};

export default {
  plugins: [vue(), vueI18nPlugin],
};

许可证

本项目遵循MIT许可证，您可以自由地使用、修改和分发此插件，但需遵守相关条款。

---

以上就是对 @vitejs/plugin-vue2 的全面技术介绍。希望通过这份文档，您能够顺利集成并利用它优化Vue 2.x的应用程序开发流程。

【免费下载链接】vite-plugin-vue2 Vite plugin for Vue 2.7 项目地址: https://gitcode.com/gh_mirrors/vit/vite-plugin-vue2