我的团队使用基于类的组件和打字稿在 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 import 放入index.html
<script type="module" src="/src/main.ts"></script>
支持 Vuetify 2 link
首先安装插件
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(),
],
}),
]
})
安装拔掉插件-vue-组件。
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'
defineComponent({
plugins: [
vue2(),
Components({
resolvers: [VuetifyResolver()],
})
]
})
如果你也使用vuetify 自定义sass变量
defineComponent({
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 支持和智能感知
我已经创建了startar模板。
https://github.com/logue/vite-vue2-vuetify-ts-starter
最初是为使用
vue-property-decorator
的项目制作的,它还支持组合API。
如果你想通过composition api访问vuetify函数,可以通过
useVuetify()
访问。
我创建了存储库,将默认的
vue2
/vuetify2
官方模板从 vue-cli 迁移到 vite 5。
主要用途:
@vitejs/plugin-vue2
和 vue:^2.7.0
(这是所需的最小版本)用于 vue 2unplugin-vue-components
适用于 vuetify 2