レンタルサーバ Vue.jsが反映されない

Question

Laravel+Vue.jsでサイトを制作し、レンタルサーバ(ロリポップ)で公開しました。フォロー機能や、いいね機能など、ブラウザ側で処理を行う部分はコンポーネントとしてVue.jsを使用しています。

初めに公開した時は、全ての機能がきちんと動作しました。

その後、フォロー機能のデザインを変えようと思いVue.jsを修正したのですが、レンタルサーバで反映されません。(ローカルでは反映されました)

試しに画面表示部分や、phpの動作を変更すると、すぐに反映されました。

どなたか対処方法をご存知でしたら、教えていただきたいと思っております。回答よろしくお願いいたします。

開発環境

Laravel5.7
Mysql5.6
PHP 7.1

フォロー機能のソースコード

 @if($post->user->id!=Auth::user()->id)
  <follow
  :follow-user="{{json_encode($post->user)}}"
  :auth-user="{{json_encode($userAuth)}}"
  :default-followed="{{json_encode($defaultFollowed)}}"
  ></follow>
 @endif

<template>
    <span style="margin-left:-10px;">
        <button v-if="!followed" type="button" class="btn btn-primary btn-sm " style="border-radius: 30px;" @click="postFollow()">フォローする</button>
        <button v-else type="button" class="btn btn-primary btn-sm" style="border-radius: 30px;" @click="postUnFollow()">フォロー解除</button>
    </span>
</template>

<script>
    export default {
        props: ['followUser', 'authUser', 'defaultFollowed'],
        data() {
            return {
                followed: false
            }
        },
        created() {
            this.followed = this.defaultFollowed
        },
        methods: {
            postFollow(){
                let url = `/api/users/${this.followUser.id}/follow`

                axios.post(url,{
                    authUser: this.authUser
                })
                    .then(res => {
                        this.followed = true
                    })
                    .catch(err => {})
            },
            postUnFollow(){
                let url = `/api/users/${this.followUser.id}/unfollow`

                axios.post(url,{
                    authUser: this.authUser
                })
                    .then(res => {
                        this.followed = false
                    })
                    .catch(err => {})
            }
        }
    }
</script>

修正部分

<template>
    <span style="margin-left:-10px;">
        <button v-if="!followed" type="button" class="btn btn-primary btn-sm " style="border-radius: 30px;" @click="postFollow()">フォローする</button>
        <button v-else type="button" class="btn btn-primary btn-sm" style="border-radius: 30px;" @click="postUnFollow()">フォロー解除</button>
    </span>
</template>

ここのコードの、ボタンの場所、ボタンの色を変更しました。

webpack.mix.js

const mix = require('laravel-mix');


mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

Comments

[yu-smc]

どこをどう変えたのかわからないと何も答えられないので、具体的に教えていただけますでしょうか。

[moko888]

修正しました。

[yu-smc]

ありがとうございます、
デプロイ時にvue以外の部分は変更が反映されるがvueだけが反映されないっていうことですよね。
デプロイ設定がわからないとなんともいえないですね。。。

[moko888]

なんども質問すみません。デプロイ設定はどこ見れば分かるのでしょうか？

[退会済みユーザー]

どうやってデプロイしてるんですか？FTP？

[moko888]

ビルド後にFTP(Cyberduck)に直接ファイルを移動しています。

[xenbeat]

「修正部分」について、これってどこがどのように変わったんですか？

[moko888]

1.margin-left:-10を追加
2.btn-defaultをbtn-primaryに変更
以上です。

Answer 1

ビルド後にFTP(Cyberduck)に直接ファイルを移動しています。

FTPでビルド後のJSファイルをアップロードしてないんじゃないかと思いますが、どうでしょうか？

ビルド後のJSファイルがどこに生成されているのかは質問者さんのwebpack設定など提示されていないので私にはわかりません。

Comments

[moko888]

もしかしてビルド後のファイルって別の場所にあるんですか？
すごい勘違いをしていたのかもしれません...
ビルド後も修正したVue.jsファイルだけを移動させていました。

[退会済みユーザー]

はい、ビルド後のファイルは別の場所にあるかと思います。
もっというとビルド後のファイルが実際に動作する方なのでビルド前の.vueファイルはアップロードする必要がそもそもありません。

[moko888]

public/jsをアップロードしたところ、無事変更されました。
ありがとうございました！

[退会済みユーザー]

よかったです。

Answer 2

ブラウザのキャッシュが残ってるんじゃないでしょうか。
キャッシュを消すかスーパーリロードをお試しください。

Comments

[moko888]

どちらも試してみたのですが、修正されませんでした。