Category: Vite

【Vite】npm run devでlocalhost:5173で接続できない時

vagrantでサーバを立てており、localhost:5173で接続できない時

$ npm run dev

> explore@0.0.0 dev
> vite

9:48:42 PM [vite] (client) Re-optimizing dependencies because vite config has changed

VITE v6.2.5 ready in 466 ms

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

$ npm run dev — –host

> explore@0.0.0 dev
> vite –host

VITE v6.2.5 ready in 132 ms

➜ Local: http://localhost:5173/
➜ Network: http://10.211.55.3:5173/
➜ Network: http://192.168.33.10:5173/
➜ press h + enter to show help

これで、192.168.33.10:5173でアクセスできるようになる。
OK^^

【Vite】viteでSassを使いたい

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About - My Vite Project</title>
  <link rel="stylesheet" href="./src/style.scss">
</head>

style.scss

body {
    margin: 50px;
    h1 {
        color: green;
    }
}

### build
$ npm run build
$ cd dist
$ tree
.
├── assets
│ ├── index-D8b4DHJx.css
│ ├── index-DK-xQhXp.js
│ └── react-CHdo91hT.svg
├── index.html
└── vite.svg

1 directory, 5 files

body{margin:50px}body h1{color:green}

うおおおおおおおおおお、これは凄い…

【Vite】フロントエンドの開発でViteを使ってみたい

$ node -v
v22.13.1
$ npm create vite@latest
$ npm install
$ npm run dev

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
})

$ npm install sass -D

about.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About - My Vite Project</title>
</head>
<body>
  <h1>About Page</h1>
  <p>This is the about page of my Vite project.</p>
  <a href="index.html">Back to Home</a>

  <script type="module" src="./src/about.js"></script>
</body>
</html>

src/about.js

console.log('About page loaded!')

なるほど、使いやすそうではある。