vitejs/plugin-vue插件

源文档：地址

注意：从vue 3.2.13+和@vitejs/plugin-vue 1.9.0+开始，@vue/compiler-sfc不再需要作为对等依赖。

// vite.config.js
import vue from '@vitejs/plugin-vue'

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

为了支持JSX/TSX，还需要@vitejs/plugin-vue-JSX。

选项

export interface Options {
  include?: string | RegExp | (string | RegExp)[]
  exclude?: string | RegExp | (string | RegExp)[]

  isProduction?: boolean

  // options to pass on to vue/compiler-sfc
  script?: Partial<
    Omit<
      SFCScriptCompileOptions,
      | 'id'
      | 'isProd'
      | 'inlineTemplate'
      | 'templateOptions'
      | 'sourceMap'
      | 'genDefaultAs'
      | 'customElement'
      | 'defineModel'
    >
  >

  template?: Partial<
    Omit<
      SFCTemplateCompileOptions,
      | 'id'
      | 'source'
      | 'ast'
      | 'filename'
      | 'scoped'
      | 'slotted'
      | 'isProd'
      | 'inMap'
      | 'ssr'
      | 'ssrCssVars'
      | 'preprocessLang'
    >
  >
  style?: Partial<
    Omit<
      SFCStyleCompileOptions,
      | 'filename'
      | 'id'
      | 'isProd'
      | 'source'
      | 'scoped'
      | 'cssDevSourcemap'
      | 'postcssOptions'
      | 'map'
      | 'postcssPlugins'
      | 'preprocessCustomRequire'
      | 'preprocessLang'
      | 'preprocessOptions'
    >
  >

  /**
   * Transform Vue SFCs into custom elements.
   * - `true`: all `*.vue` imports are converted into custom elements
   * - `string | RegExp`: matched files are converted into custom elements
   *
   * @default /\.ce\.vue$/
   */
  customElement?: boolean | string | RegExp | (string | RegExp)[]

  /**
   * Use custom compiler-sfc instance. Can be used to force a specific version.
   */
  compiler?: typeof _compiler
}

资源URL处理

当@vitejs/plugin-vue编译SFC中的＜template＞块时，它还将遇到的任何资产URL转换为ESM导入。

例如，以下模板片段：

<img src="../image.png" />

与以下内容相同：

<script setup>
import _imports_0 from '../image.png'
</script>

<img :src="_imports_0" />

默认情况下，将转换以下标记/属性组合，并且可以使用template.transformAssetUrls选项进行配置。

{
  video: ['src', 'poster'],
  source: ['src'],
  img: ['src'],
  image: ['xlink:href', 'href'],
  use: ['xlink:href', 'href']
}

请注意，只有作为静态字符串的属性值才会被转换。否则，您需要手动导入资产，例如从“..”导入imgUrl/image.png'。

将选项传递给vue/compiler sfc的示例：

import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // ...
        },
        transformAssetUrls: {
          // ...
        },
      },
    }),
  ],
}

转换自定义块的示例

import vue from '@vitejs/plugin-vue'
import yaml from 'js-yaml'

const vueI18nPlugin = {
  name: 'vue-i18n',
  transform(code, id) {
    // if .vue file don't have <i18n> block, just return
    if (!/vue&type=i18n/.test(id)) {
      return
    }
    // parse yaml
    if (/\.ya?ml$/.test(id)) {
      code = JSON.stringify(yaml.load(code.trim()))
    }
    // mount the value on the i18n property of the component instance
    return `export default Comp => {
      Comp.i18n = ${code}
    }`
  },
}

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

创建一个名为Demo.vue的文件，将lang=“yaml”添加到<i18n>块中，然后可以使用yaml的语法：

<template>Hello</template>

<i18n lang="yaml">
message: 'world'
fullWord: 'hello world'
</i18n>

消息安装在组件实例的i18n属性上，您可以这样使用：

<script setup lang="ts">
import Demo from 'components/Demo.vue'
</script>

<template>
  <Demo /> {{ Demo.i18n.message }}
  <div>{{ Demo.i18n.fullWord }}</div>
</template>

 使用Vue SFCs作为自定义元素

需要vue@^3.2.0&@vitejs/plugin vue@^ 1.4.0

Vue 3.2引入了defineCustomElement方法，该方法适用于SFCs。默认情况下，在构建过程中，会提取SFC内的＜style＞标记并将其合并到CSS文件中。但是，当运送自定义元素库时，可能需要将样式内联为JavaScript字符串，并将其注入自定义元素的影子根中。

从1.4.0开始，以*.ce.vue结尾的文件将以“自定义元素”模式编译：其＜style＞标记被编译成内联的CSS字符串，并作为其styles属性附加到组件：

import { defineCustomElement } from 'vue'
import Example from './Example.ce.vue'

console.log(Example.styles) // ['/* css content */']

// register
customElements.define('my-example', defineCustomElement(Example))

请注意，在自定义元素模式中，不需要使用＜style-scoped＞，因为CSS已经在shadow DOM中确定了作用域。

customElement插件选项可用于配置行为：

｛customElement:true｝将以自定义元素模式导入所有*.vue文件。
使用字符串或正则表达式模式更改文件应作为自定义元素加载的方式（此检查在包含和排除匹配之后应用）。