CentOS Stream 9

Vite : インストール2026/04/21

 

フロントエンド ビルド ツール Vite のインストールです。

[1]

こちらを参考に Node.js をインストールしておきます

[2] 任意の一般ユーザーで vue.js テンプレートで Vite テストアプリケーションを作成します。
[cent@dlp ~]$
npm create vite@latest testproject2 -- --template vue

Need to install the following packages:
create-vite@9.0.5
Ok to proceed? (y)


> npx
> create-vite testproject2 --template vue

  VITE v8.0.9  ready in 334 ms

  →  Local:   http://localhost:5173/
  →  Network: use --host to expose
  →  press h + enter to show help

[cent@dlp ~]$
cd testproject2

[cent@dlp testproject2]$
npm install


added 4 packages, and audited 41 packages in 738ms

10 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

[cent@dlp testproject2]$
npm run dev


> testproject2@0.0.0 dev
> vite


  VITE v8.0.9  ready in 361 ms

  →  Local:   http://localhost:5173/
  →  Network: use --host to expose
  →  press h + enter to show help


# 他ホストからアクセスしたい場合は [--host] オプションを付加

[cent@dlp testproject2]$
vi package.json
{
  "name": "testproject2",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    // 追記
    "dev": "vite --host",
    "build": "vite build",
    "preview": "vite preview"
  },

[cent@dlp testproject2]$
vi vite.config.js
export default defineConfig({
  // 追記
  server: {
    host: true,
  },
  plugins: [vue()],
})

[cent@dlp testproject2]$
npm run dev


> testproject2@0.0.0 dev
> vite --host


  VITE v8.0.9  ready in 330 ms

  →  Local:   http://localhost:5173/
  →  Network: http://10.0.0.30:5173/
  →  press h + enter to show help
  任意のクライアントコンピューターで表示された URL に Web アクセスして、以下のようなページが表示されれば OK です。
関連コンテンツ