Vite 経由で作った Vue プロジェクトが動かない（白紙になる）
たんてん結論
vite.config.js に base: './' を記述する（無いならちゃんと書いてからビルドする）
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))
}
},
base: './' // ★☆★☆ ここ!!! ★☆★☆
})
参考資料
たんてんとりあえず検証用の Vue プロジェクトをつくってみる。
npm create vue@latest
...略...
Done. Now run:
cd vue-url-test
npm install
npm run dev
今回は vue-url-test という名前の Vue プロジェクトをつくった。
VITE v5.2.8 ready in 717 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
ということで、o で Chrome を開いてテストしてみる。
「o で Chrome を開いて」って何？
press h + enter to show help に従ってヘルプを見てみると、ショートカット集が表示される。
Shortcuts
press r + enter to restart the server
press u + enter to show server url
press o + enter to open in browser << これ
press c + enter to clear console
press q + enter to quit
ここに書いてある通り、oを入力してエンターキーを押すと、自動的にブラウザで表示される。
Chrome での表示
とりあえずはちゃんと表示されている。
たんてん続いて、ビルドする。
npm run build
ビルドされた結果が dist フォルダーに置かれているので、この中身をサーバーに送る（Apache はすでに準備されているものとする）
そして、該当の URL を Chrome のアドレスバーに入力して確認してみると、
Chrome での表示
何も表示されていない！ Console を開いてみてみると、
JavaScript も css も見当たんねーよ！ とのお叱り。
たんてんテストのとき（npm run dev から表示確認したとき）はうまく表示されていたんだがなァと思って今回サーバーにアップロードした HTML ファイルを見てみると、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
~~~~~~~~~~~~
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<script type="module" crossorigin src="/assets/index-pkPZQdrn.js"></script>
~~~~~~~~~~~~~~~~~~~~~~~~~
<link rel="stylesheet" crossorigin href="/assets/index-BaMTLMsk.css">
~~~~~~~~~~~~~~~~~~~~~~~~~~
</head>
<body>
<div id="app"></div>
</body>
</html>
というように、本来
-
./favicon.icoであるべきところが/favicon.ico -
./assets/index-pkPZQdrn.jsであるべきところが/assets/index-pkPZQdrn.js
であるように、./ の . が抜け落ちているではないか！
たんてんこれを修正していく。
インターネットでいい感じに調べると、解決してくれそうな記事（Q&Aサイト）を見つけた。
vite.config.js で base を設定すればよいとのこと！
https://ja.vitejs.dev/config/shared-options.html#base
これをまだ設定していないので、デフォルト値である/が適用され、ビルド時に /favicon.ico のように . なしの URL に自動変換されているのだ。
ちょうど上記のドキュメントにも ./ を指定する例が書かれているので、それに従って ./ を設定してみようと思う。
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))
}
+ },
+ base: './'
})
これで保存して、再度ビルドしてみる。
npm run bulid
そして上書きされた dist フォルダーの index.html を覗いてみると…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="./favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<script type="module" crossorigin src="./assets/index-pkPZQdrn.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-BaMTLMsk.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
ちゃんと ./ から始まる URL になっている！ もはや確かめるまでもないが一応サーバーにアップロードして確認してみる。
Chrome での表示 ※使いまわしじゃないヨ
大丈夫だ！表示されている！！！