vuejs のクイックスタートをやってみたが、画面表示ができなかった。
その時の解決方法を残す。
目次
実行環境
- macOS ventura 13.2
- docker desktop 4.16.2
- node:18.14.2-alpine
- vite 4.1.4
やったこと
以下ページを参考に、vuejsのクイックスタートを試した。
クイックスタートの手順で、docker環境で、vuejsをセットアップ。
/src # npm init vue@latest
/src # cd app
/src/app # npm installセットアップは正常に完了し、起動したが、ブラウザで画面が表示されない。
# npm run dev
> app@0.0.0 dev
> vite
VITE v4.1.4 ready in 598 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
コンソールを見てみると、NetworkのURLが表示されておらず、
「use –host to expose」と記載されている。
解決策
「–host」をつけてみたら、うまくいった。
/src/app # npm run dev -- --host
> app@0.0.0 dev
> vite --host
VITE v4.1.4 ready in 572 ms
➜ Local: http://localhost:5173/
➜ Network: http://172.25.0.2:5173/
➜ press h to show helpmac上で、構築していたら、Localで見れたのだろうと思う。
参考情報
ネットで調べていると、以下を見つけた。
以下２つの代替案が書いてあった。
vite.config.jsに「server: { host: true }」を追記する
私の場合は、TypeScriptを有効にしていたので、vite.config.tsが直下にあり、追記したら、「–host」がなくても表示された。
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
server: {
host: true
}
});
package.jsonのscriptsに以下を追加して、npm run dev の代わりに、npm run hostを実行する
"host": "vite --host"
Tips
Viteは、ヴィートと読む。
vueJS専用ではなく、React等、様々な環境で利用可能な汎用的なビルドツール
実行スピードの速さが特長のようだ。