前提
Vue3 + TypeScript + Vuetify3 beta + Vite環境
下記URLの手順でプロジェクトを作成しています。
「npm run dev」をした際、後述のエラーメッセージが出てコンパイルできない状態です。
参考URL:https://qiita.com/kyonc5/items/bd7b9d887c81f1b6a598
URL先と同じ手順ですが、手順記載
1.C直下にviteでプロジェクト作成※この際vue-ts(TypeScript)選択
cmd
>npm create vite@latest test_system_2 ? Select a framework: » - Use arrow-keys. Return to submit. > vue ? Select a variant: » - Use arrow-keys. Return to submit. > vue-ts
2.作成フォルダへ移動、Vuetifyのインストール
cmd
>cd test_system_2 >vue add vuetify ? Choose a preset: Vite Preview (Vuetify 3 + Vite)
3.コンパイル
cmd
>npm install >npm run dev
下記載エラーメッセージ
実現したいこと
上記構成でのプロジェクトの作成
発生している問題・エラーメッセージ
cmd
C:\test_system_2>npm run dev > test_system_2@0.0.0 dev > vite failed to load config from C:\test_system_2\vite.config.ts error when starting dev server: Error: Cannot find module '@vuetify/vite-plugin' Require stack: - C:\test_system_2\vite.config.ts - C:\test_system_2\node_modules\vite\dist\node\chunks\dep-59dc6e00.js - C:\test_system_2\node_modules\vite\dist\node\cli.js - C:\test_system_2\node_modules\vite\bin\vite.js at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15) at Function.Module._load (node:internal/modules/cjs/loader:778:27) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18) at Object.<anonymous> (C:\test_system_2\vite.config.ts:30:34) at Module._compile (node:internal/modules/cjs/loader:1105:14) at Object.require.extensions.<computed> [as .ts] (C:\test_system_2\node_modules\vite\dist\node\chunks\dep-59dc6e00.js:61924:20) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19)
該当のソースコード
・vite.config.ts
TypeScript
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vuetify from '@vuetify/vite-plugin' const path = require('path') // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin vuetify({ autoImport: true, }), ], define: { 'process.env': {} }, resolve: { alias: { '@': path.resolve(__dirname, 'src'), }, }, /* remove the need to specify .vue files https://vitejs.dev/config/#resolve-extensions resolve: { extensions: [ '.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue', ] }, */ })
試したこと
1.エラーの出ているファイル「vite.config.ts」を確認し、3行目の
TypeScript
import vuetify from '@vuetify/vite-plugin'
が「 TS2307 (TS) Cannot find module '@vuetify/vite-plugin' or its corresponding type declarations. 」になっていることを確認しました。
2.'@vuetify/vite-plugin' がインストールされていないのではと考え、
「C:\test_system_2\node_modules@vuetify」を確認しました。
vite-pluginフォルダがなかったためこれが原因では?と考えていますが、
vite-pluginのインストール方法がわからない状態です。
補足情報(FW/ツールのバージョンなど)
主要なツール | ver |
---|---|
npm | 8.5.5 |
node | 16.15.0 |
@vue/cli | 5.0.4 |
cmd
>npm ls test_system_2@0.0.0 C:\test_system_2 +-- @mdi/font@5.9.55 +-- @types/webfontloader@1.6.34 +-- @vitejs/plugin-vue@2.3.3 +-- roboto-fontface@0.10.0 +-- typescript@4.7.2 +-- vite-plugin-vuetify@1.0.0-alpha.11 +-- vite@2.9.9 +-- vue-cli-plugin-vuetify@2.5.0 +-- vue-tsc@0.34.17 +-- vue@3.2.36 +-- vuetify@3.0.0-beta.2 +-- webfontloader@1.6.28 `-- webpack-plugin-vuetify@2.0.0-alpha.10
お手数をおかけしますが、情報ありましたらお願いいたします。
まだ回答がついていません
会員登録して回答してみよう