LoginSignup
1
1

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-07-03

npm run buildした後

distファイルが生成され、そのファイルをNetlifyにアップしても、
真っ白な画面で何も開かない。(Netlifyに限らずデプロイしたとき)
画面遷移させてもこんなかんじに404エラーに。
スクリーンショット 2020-07-04 7.43.43.png

原因

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

解決方法

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

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

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

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

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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1