【Vue.js】distファイルをNetlifyにあげてもローカル環境のように動かない。

1578 ワード
Vue.js Netlify vue-cli Vue.js テキストリンク

npm run buildした後

distファイルが生成され、そのファイルをNetlifyにアップしても、
真っ白な画面で何も開かない。(Netlifyに限らずデプロイしたとき)
画面遷移させてもこんなかんじに404エラーに。

原因

ドメイン直下で開発していれば、問題なくできるのですが、
サブディレクトリなど別の場所で開発していると起きる現象だそうです。
なので、サブディレクトリに配置していても、パスを通るようにして上げる必要があります。

解決方法

package.jsonなどがある階層に
vue.config.jsを作成します。
そして以下のように書きます。

vue.config.js
module.exports = {
  publicPath: './'
}

これによって、サブディレクトリで開発していてもパスが通ります。

少し前の記事とかだと publicPathの部分を、baseUrlにしている記事がありましたが、現在は非推奨だそうです(公式リファレンス)
baseUrlにしてやると、エラー(?)が出て進みませんでした。

参考サイト
【Vue.js】CLI 3系でビルドしたファイルが表示されなかったら相対パスにしよう