vite对vue的支持(vite入门教程)

不同于webpack等构建工具,ViteVue提供了第一优先级的支持。

Vite为Vue提供了开箱即用的官方插件:

  • vitejs/plugin-vue --- 提供Vue 3 单文件支持
  • vitejs/plugin-vue-jsx -- 提供Vue 3 jsx 支持
  • vite-plugin-vue2 -- 提供Vue 2支持

vite对vue的支持(vite入门教程)

vitejs/plugin-vue

注意:适用于Vue3

vitejs/plugin-vue 是官方提供的Vue3 单文件项目使用的插件。

官方github: https://github.com/vitejs/vite/tree/main/packages/plugin-vue

使用方法如下:

如果你使用官方提供的模板新建项目,可以跳过此安装步骤:

npm install @vitejs/plugin-vue -D

在vite.config.ts中,

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 其他配置参看 https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

同时,该插件还支持的可选配置项有:

export interface Options {
  //类似webpack中对于需要/不需要解析的路径匹配
  include?: string | RegExp | (string | RegExp)[]
  exclude?: string | RegExp | (string | RegExp)[]

  ssr?: boolean
  isProduction?: boolean

  /**
   * 将vue的单文件组件编译为dom结构 (要求 Vue >= 3.2.0)
   * - `true` -> 将所有的 `*.vue` 引入编译为dom结构
   * - `string | RegExp` -> 按照该正则匹配文件,并将其编译为dom结构
   *
   * @default /\.ce\.vue$/
   */
  customElement?: boolean | string | RegExp | (string | RegExp)[]

  /**
   * 允许Vue ref转换 (实验中的配置).
   * https://github.com/vuejs/vue-next/tree/master/packages/ref-transform
   *
   * **注意 Vue \>= 3.2.5**
   *
   * - `true`: transform will be enabled for all vue,js(x),ts(x) files except
   *           those inside node_modules
   * - `string | RegExp`: apply to vue + only matched files (will include
   *                      node_modules, so specify directories in necessary)
   * - `false`: disable in all cases
   *
   * @default false
   */
  refTransform?: boolean | string | RegExp | (string | RegExp)[]

  // options to pass on to vue/compiler-sfc
  script?: Partial<SFCScriptCompileOptions>
  template?: Partial<SFCTemplateCompileOptions>
  style?: Partial<SFCStyleCompileOptions>
}

需要自定义配置时的示例:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 其他配置参看 https://github.com/vitejs/vite/tree/main/packages/plugin-vue
export default defineConfig({
  plugins: [vue({
    isProduction: true  
  })]
})

该配置类似于在webpack中,配置对.vue文件的解析loader。

vitejs/plugin-vue-jsx

注意:适用于Vue3

安装:

npm install  @vitejs/plugin-vue-jsx -D

使用示例, vite.config.js文件中配置如下:

import vueJsx from '@vitejs/plugin-vue-jsx'

export default {
  plugins: [
    vueJsx({
      // options are passed on to @vue/babel-plugin-jsx
    })
  ]
}

关于JSX详细配置请参看下篇文章。

vite-plugin-vue2

注意:适用于Vue2

官方文档:https://github.com/underfin/vite-plugin-vue2

安装:

npm install  @vitejs/plugin-vue-vue2 -D

使用示例, vite.config.js文件中配置如下:

import { createVuePlugin } from 'vite-plugin-vue2'

export default {
  plugins: [
    createVuePlugin(/* options */)
  ],
}

可选的配置项有:

  • vueTemplateOptions

数据类型: Object

默认值: { compilerOptions :{ whitespace: 'condense' } }

compilerOptions 配置项是用来配置压缩模式的。 { whitespace: 'condense' } 意味着如果有单独的换行,将会被删除,如果存在多个连续空格,将会被压缩到一个空格。

如果你不希望这样编译代码,可以设置{ whitespace: 'preserve' }

  • jsx true/false 用来配置是否需要支持jsx的编译
  • jsxOptions jsx代码的babel编译配置项
  • target string 配置esbuild的编译脚本方式
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 ttt5cn@163.com 举报,一经查实,本站将立刻删除。

发表评论

登录后才能评论