vuejsのクイックスタートの手順を試したが、つまづいた話し

vuejsのクイックスタートの手順を試したが、つまづいた話し

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 help

mac上で、構築していたら、Localで見れたのだろうと思う。

参考情報

ネットで調べていると、以下を見つけた。

以下2つの代替案が書いてあった。

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等、様々な環境で利用可能な汎用的なビルドツール

実行スピードの速さが特長のようだ。

Web技術カテゴリの最新記事