はじめに
Viteは速いらしい。
開発体験の向上につながるらしい。
しかも、vue.jsと開発者が同じなので、vueとの相性がいいらしい。
Viteはヴィートと読んでフランス語で「素早い」を意味する。
という訳で、既存で開発しているvue環境にviteを導入してみました。
しかし、結構、手間取ったので、その記録を記載しておきます。
Viteで何がよくなるのか
以下の記事によると、
Vite ってよく聞くけど何なんですか？ あれは
zenn.dev
- セットアップが簡単 (面倒くさくない)
- (開発時の) パフォーマンス
- 開発サーバーの起動速度
- ソースコードを編集した時にブラウザに反映される速度
- 扱いやすい API
- プラグインの書きやすさ・互換性
- 十分に型付けされた API
らしいです。
Let’s Vite 導入
Vite導入の以下の記事を見つけました。まずはこれを参考にします。
[Vue.js] Vue2 から Vue3 への移行 & Vite 導入の記録 - Qiita
はじめにVue.js の学習用リポジトリ で扱う Vue.js のバージョンを v2.x から v3.x にアップデート & Vite を導入したので、その際の手順を記録として残したいと思います。…
qiita.com
追加でViteをインストールする
viteを追加する
$ npm install -g vite
$ npm install vite --save-devViteが追加されているかの確認（ファイルの確認）
$ ls node_modules/.bin/vite
node_modules/.bin/viteViteが追加されているかの確認（viteを直接起動）
$ npx vite
VITE v5.4.7 ready in 604 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help※上記のViteの起動はあくまで動くかどうかの確認です。
各ファイルの設定変更
ここからViteの設定を書いていきます。
まずはpackage.jsonはscriptsの部分を以下のように変更します。
"scripts": {
"serve": "vite",
"build": "vite build",
"lint": "eslint --fix 'src/*.{js, vue}' && eslint --fix 'src/**/*.{js, vue}'",
"jsdoc": "./node_modules/.bin/jsdoc -c ./jsdoc-conf.json"
},main.jsを以下のように変更。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
port: 8080
})このタイミングで一旦、起動してみた。
がViteではなく、vueが起動してしまう。
インストールしたタイミングで動くことは確認したので、vue@3.x が使われているか確認してみたら以下のようになった。
$ npm list vue
npm ERR! code ELSPROBLEMS
npm ERR! invalid: vue@3.3.4 /home/xxxx/django/django_change_view/docker_compose/vue/frontend/node_modules/vue
frontend@0.1.0 /home/xxxx/django/django_change_view/docker_compose/vue/frontend
├─┬ @fortawesome/vue-fontawesome@3.0.6
│ └── vue@3.3.4 deduped
├─┬ @unhead/vue@1.9.13
│ └── vue@3.3.4 deduped
├─┬ @vitejs/plugin-vue@5.1.4
│ └── vue@3.3.4 deduped
├─┬ @vue-leaflet/vue-leaflet@0.10.1
│ └── vue@3.3.4 deduped
├─┬ @vue/cli-plugin-babel@5.0.8
│ └─┬ @vue/babel-preset-app@5.0.8
│ ├─┬ @vue/babel-preset-jsx@1.4.0
│ │ └── vue@3.3.4 deduped invalid: "^3.3.8" from node_modules/bootstrap-vue-next, "^2.5.17" from node_modules/vue2-leaflet, "^2.5.18" from node_modules/portal-vue
│ └── vue@3.3.4 deduped invalid: "^3.3.8" from node_modules/bootstrap-vue-next, "^2.5.17" from node_modules/vue2-leaflet
├─┬ bootstrap-vue-next@0.15.5
│ ├─┬ @floating-ui/vue@1.0.6
│ │ └─┬ vue-demi@0.14.7
│ │ └── vue@3.3.4 deduped invalid: "^3.3.8" from node_modules/bootstrap-vue-next, "^2.5.17" from node_modules/vue2-leaflet, "^2.5.18" from node_modules/portal-vue
│ └── vue@3.3.4 deduped invalid: "^3.3.8" from node_modules/bootstrap-vue-next
├─┬ bootstrap-vue@2.23.1
│ └─┬ portal-vue@2.1.7
│ └── vue@3.3.4 deduped invalid: "^3.3.8" from node_modules/bootstrap-vue-next, "^2.5.17" from node_modules/vue2-leaflet, "^2.5.18" from node_modules/portal-vue
├─┬ vue-chartjs@5.3.1
│ └── vue@3.3.4 deduped invalid: "^3.3.8" from node_modules/bootstrap-vue-next
├─┬ vue-router@4.2.5
│ └── vue@3.3.4 deduped invalid: "^3.3.8" from node_modules/bootstrap-vue-next
├─┬ vue@3.3.4 invalid: "^3.3.8" from node_modules/bootstrap-vue-next
│ └─┬ @vue/server-renderer@3.3.4
│ └── vue@3.3.4 deduped invalid: "^3.3.8" from node_modules/bootstrap-vue-next, "^2.5.17" from node_modules/vue2-leaflet, "^2.5.18" from node_modules/portal-vue
└─┬ vue2-leaflet@2.7.1
└── vue@3.3.4 deduped invalid: "^3.3.8" from node_modules/bootstrap-vue-next, "^2.5.17" from node_modules/vue2-leaflet
npm ERR! A complete log of this run can be found in: /home/appare99/.npm/_logs/2024-09-21T03_43_07_635Z-debug-0.logいくつかのパッケージでバージョンの不整合が原因で invalid と表示されている。
ということで、パッケージを整理した。
$ rm -rf node_modules package-lock.json
$ npm cache clean --force
npm WARN using --force Recommended protections disabled.
$ npm install再度、vueを起動してみると以下のようなエラーが出てくる。
Error: Cannot find module @rollup/rollup-linux-x64-musl. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try `npm i` again after removing both package-lock.json and node_modules directory.Error: Cannot find module @rollup/rollup-linux-x64-musl. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try `npm i` again after removing both package-lock.json and node_modules directory.
というエラー。
Dockerfileを以下の様に変更しました。
イメージがalpineだったのだけど、node:20にしたら直りました。
FROM node:20
WORKDIR /app
RUN npm install -g npm@latest
EXPOSE 5173再度、vueを起動したら、以下のようなエラー。
★ここでviteが起動できるのを確認しました。
frontend-container | Error: The following dependencies are imported but could not be resolved:
frontend-container |
frontend-container | @/assets/images/usagisan.gif (imported by /app/src/components/JapanMap.vue?id=0)
frontend-container | @/assets/images/kumasan.gif (imported by /app/src/components/JapanMap.vue?id=0)
frontend-container | @/assets/images/nekosan.gif (imported by /app/src/components/JapanMap.vue?id=0)
frontend-container |
frontend-container | Are they installed?
frontend-container | at file:///app/node_modules/vite/dist/node/chunks/dep-DG6Lorbi.js:50603:15
frontend-container | at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
frontend-container | at async file:///app/node_modules/vite/dist/node/chunks/dep-DG6Lorbi.js:50108:26staticファイルが読み込めていないみたい。
main.jsを以下のように変更（ハイライトのところを追記しています。）
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
port: 8080,
resolve: {
alias: {
'@': path.resolve(__dirname, './src') // @をsrcフォルダに解決
}
}
})これでエラーが無く、viteが起動できた。
しかし、ブラウザで確認しようとすると、、、
「ページが見つかりません」の404のエラー。
まだ長くなりそうなので、今回はここまでにします。
次回はこのエラーを解消するところから。
