Closed8

Vue3 + TypeScript + Vuetify3(Alpha) + Vite のプロジェクトを作成したときのメモ

Vue3 + TypeScript + Vuetify3(Alpha) + Viteのプロジェクトを作成しようとしたときに色々詰まったのでメモを残しておく。

なおVuetify3は現時点(2021/08/16)でAlpha版であるし、他の技術についてもアップデートが早いものが多そうなので、今後手順が変わる可能性はある。

環境

以下がインストールされている前提。

❯ node -v
v15.8.0

❯ yarn -v
1.22.10

プロジェクトの作成

Vite公式通りに作成する。
テンプレートはvue-tsを利用する。

yarn create vite my-vue-app --template vue-ts

起動してみる。

cd my-vue-app
yarn install
yarn dev

Vuetify3(Alpha)のインストール

こちらもVuetify公式通りインストールを試みる。

❯ vue add vuetify

// presetはPreview (Vuetify 3 + Vite)を選択。
? Choose a preset:
  Default (recommended)
❯ Preview (Vuetify 3 + Vite)
  Prototype (rapid development)
  V3 (alpha)
  Configure (advanced)

この状態で起動するとエラーが出ている。

エラーの解消

色々とTypeScriptではなくJavaScriptベースの箇所があるので直していく。

  • index.htmlの修正。
index.html
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="/src/main.js"></script>
  • vite.config.jsvite.config.tsが作成されるのでもともとあったvite.config.tsを削除する。
  • デフォルトだとvite.config.jssrc/styles/variables.scssを読み込むようになっているので修正する。(今回は該当部分を削除する。)
vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

- import path from 'path'
- const srcPath = path.resolve(__dirname, 'src', 'styles', 'variables.scss')

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  define: { 'process.env': {} },
-  css: {
-    preprocessorOptions: {
-      sass: { additionalData: `@import ${srcPath}\n` },
-      scss: { additionalData: `@import ${srcPath};\n` },
-    },
-  },
  /* remove the need to specify .vue files https://vitejs.dev/config/#resolve-extensions
  resolve: {
    extensions: [
 

↑でsrc/styles/variables.scssの該当部分を削除したが、空のsrc/styles/variables.scssを新規に追加してしまっても良い。(むしろこちらの方が正しいかもしれない)

このスクラップは4ヶ月前にクローズされました
ログインするとコメントできます