将 Vuetify 2 添加到 vite 项目

Question

我的团队使用基于类的组件和打字稿在 Vue 2 中开发应用程序。

现在，我们想迁移到 Vite - 因为它具有所有优势。

我已遵循本指南（我只能推荐） https://vueschool.io/ articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/

简而言之 - 它不起作用。浏览器甚至无法从index.html获取“/src/main.js” 但是如果我输入“/src/main.ts”，它会获取它，但会显示错误，表明 Vuetify 甚至没有安装。 我知道.ts文件是浏览器无法读取的，我只是在调试了2个小时后尝试了一下

此外，我在Vuetify文档中看到“第一方Vite支持”仍有待发布。 https://vuetifyjs.com/en/introduction/roadmap/#in-development

我的问题是 - 是否可以在 Vite 中添加 Vuetify 应用程序？

package.json（仅依赖项）

  "dependencies": {
    "vue": "^2.6.12",
    "vue-class-component": "^7.2.6",
    "vue-property-decorator": "^9.1.2",
    "vuetify": "^2.4.0",
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vitejs/plugin-vue": "^1.6.1",
    "@vue/cli-plugin-typescript": "^4.5.15",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^8.9.0",
    "eslint-plugin-vue": "^8.5.0",
    "sass": "~1.32.0",
    "typescript": "~4.1.5",
    "vite": "^2.6.13",
    "vite-plugin-vue2": "^1.9.2",
    "vue-cli-plugin-vuetify": "^2.4.5",
    "vue-template-compiler": "^2.6.14",
    "vuetify-loader": "^1.7.0"
  },

tsconfig.json

{
  "compilerOptions": {
    // ...
    "target": "esnext",
    "module": "esnext",
    "isolatedModules": true,
    "useDefineForClassFields": true,
    "types": [
      "webpack-env",
      "vite/client"
    ],

vite.config.js

import { defineConfig } from "vite";
import { createVuePlugin as vue } from "vite-plugin-vue2";
const path = require("path");

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

顶部呈现的空 html，以及“no vuetify”错误指示器 当我将 .ts 导入 index.html

<script type="module" src="/src/main.ts"></script>

Answer 1

支持 Vuetify 2 链接

首先安装插件

npm i unplugin-vue-components -D

然后在你的 vite.config.ts 文件中：

import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
import { VuetifyResolver } from 'unplugin-vue-components/resolvers';
import Components from 'unplugin-vue-components/vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    createVuePlugin(/* options */),
    Components({
      resolvers: [
        // Vuetify
        VuetifyResolver(),
      ],
    }),
  ]
})

Answer 2

安装 unplugin-vue-components。

npm install -D unplugin-vue-components

然后在 vite.config.ts 中添加插件

import { defineConfig } from 'vite'
import vue2 from '@vitejs/plugin-vue2'
import Components from 'unplugin-vue-components/vite'
import { VuetifyResolver } from 'unplugin-vue-components/resolvers'

defineConfig({
  plugins: [
     vue2(),
     Components({
        resolvers: [VuetifyResolver()],
     })
  ]
})

如果你也使用 vuetify 自定义 sass 变量

defineConfig({
  plugins: [
    vue2(),
    Components({
      resolvers: [VuetifyResolver()],
    }),
  ],
  css: {
    // https://vitejs.dev/config/#css-preprocessoroptions
    preprocessorOptions: {
      sass: {
        additionalData: [
          // vuetify variable overrides
          '@import "@/styles/variables.scss"',
          '',
        ].join('\n'),
      },
    },
  },
})

你可以参考我的 Vite 3 + Vuetify 2 + Vue 2.7 的入门模板
它还包括 Vuetify 2 组件中的 TypeScript 支持和 IntelliSense

https://github.com/kingyue737/vitify-admin

Answer 3

我已经创建了 startar 模板。

https://github.com/logue/vite-vue2-vuetify-ts- starter

最初是为使用 vue-property-decorator 的项目制作的，它还支持组合 api。

如果您想使用合成 API 访问 vuetify 函数，可以使用 useVuetify() 访问它。

Answer 4

我创建了存储库，将默认的 vue2/vuetify2 官方模板从 vue-cli 迁移到 vite 5。

它主要使用：

• @vitejs/plugin-vue2和vue:^2.7.0（这是vue 2所需的最低版本）
• unplugin-vue-components for vuetify 2

请参阅：https://github.com/sbernard31/vuetify2-vite-template