More than 5 years have passed since last update.

Vue-CLI3でbuildすると画面が真っ白になる

Last updated at 2019-03-03Posted at 2019-03-03

はじめに

Vue.js + S3 でWebサイトを公開する方法がよく出ていますね。

どのサイトも
「Vue.jsで作ったファイルをS3にデプロイするだけ。めっちゃ簡単！」
なトーンで書かれていますが、たしかに簡単です。

ただ、Vue-CLIのバージョンが新しかったせいか
buildしてできたデプロイファイルを開くと、ブランクページ（画面が真っ白）に…なぜ…？
となって2時間くらい詰まったのでメモを残しておきます。

Vue CLI（公式マニュアル）を見るのが一番です。
英語が読めないとキツいかもしれませんが、
各種ブログの情報はどんどん古くなっているので、結局、公式ブログで調べるのが一番早いです。

ちなみに、Vue.jsについては日本語公式マニュアルもあるのですが、
Vue CLIは日本語マニュアルがないんですよね…。

あと、以下も英語ですが、この動画で概念からサンプルアプリの作成まで全て説明してくれています。
とてもわかりやすかったです。
しかも公式だから多分常にメンテされるんじゃないのかな？

アプリの作成
vue create my-app

ローカルでのアプリの実行
vue run serve

デプロイ資源の作成
vue run build

S3へのデプロイ
公式では以下を使用することを推奨しているようです。

が、私は以下のサイトのgulpを使った方法でやりました。

公式推奨の方がcloudfrontのキャッシュクリアとかやってくれそうなので細かいところに手が届きそうですが、単純にデプロイできるかを確認するだけであればこれで十分でした。
今度、公式推奨の方法も試してみようかな。

ようやく本記事のメイン。
vue run build をすると、./distディレクトリにデプロイ用ファイルが作られるのですが、
index.htmlをそのファイルを開いてみると、真っ白なブランクページが表示されてしまいます…

開発者ツールを見る限り、
原因は、buildで作成されたindex.htmlに定義されているJSやCSSのパスが
./js/xxxx.jsではなく
/js/xxxx.jsになってしまいパスが通っていない模様。

日本語で調べてみるも意外と同じ事象で悩んでいる人が少ない。なんでだ…。

最終的に役に立ったのは以下の投稿でした。（これもまた英語）

vue.config.js を作成して以下を定義するだけ。

vue.config.js


module.exports = {
    baseUrl: './'
}

ちなみに、CLI2系では baseurl を使って指定していましたが、
CLI3.3からはpublicPathが推奨されています。
baseUrlで実行してみるとWarningが出ます。

WARN "baseUrl" option in vue.config.js is deprecated now, please use "publicPath" instead.

公式サイトにも書かれていますね。

baseUrl
Deprecated since Vue CLI 3.3, please use publicPath instead.

（訳：baseUrlはCLI3.3から非推奨だから、publicPath使ってね）

2019年以降の記事でもbaseUrlで解決するよ、って書かれてたりします。
Vue-CLI、けっこう頻繁に更新されているんですね。

以上、Vue-CLI3で詰まった点でした。