Nuxt.jsでファイルの有無を調べる方法

Nuxt.jsでファイルの有無を調べるために、node.jsのfs.existsSyncというメソッドがあることを知り、
下記のようなコードで作成し、動作確認を行いました。
UIフレームワークとしてVuetify.jsを使用しています。

vue
1<template>
2 <div>
3  <v-btn @click="test">fileCheck
4  </v-btn>
5 </div>
6</template>
7<script lang="ts">
8import {Component, Vue} from 'nuxt-property-decorator'
9const fs = require('fs')
10
11@Component({})
12export default class extends Vue {
13 test() {
14  const url = './static/test.png'
15    if (fs.existsSync(url)) {
16      alert('exist!')
17    } else {
18      alert('Not exist!')
19    }
20 }
21}
22</script>

コードは、ボタンをクリックして、ファイルの有無をアラートで表示するという簡単なものです。
このコードを実行したところ、下記のようにfs.existsSyncは関数ではないというエラーとなりました。

client.js?06a0:97 TypeError: fs.existsSync is not a function

使用方法に誤りがあるのでしょうか？
どなたか詳しい方ご教示いただけますと幸いです。

hoshi-takanori

2021/08/05 02:41 編集

ブラウザで動く JavaScript コードからは PC 上のファイルにはアクセスできません。 node.js の fs.existsSync などの関数は、サーバー側で動かすためのものです。

takochan1192

2021/08/05 02:52

ありがとうございます。そうだったのですね。クライアント側で行うことを想定しておりました。 nuxtのプロジェクトの中にstaticというディレクトリがあり、その中に当該のファイルが存在するか否かというのを判定する必要があり、この質問を致しました。 webアプリをデプロイした（AWSのS3上を想定）後に、客先によって、pngデータ（ロゴ）を切り替えるという処理が必要だったのです。pngデータが無い場合もありまして、その場合は、別なテキストデータを表示させるのですが、pngデータ参照でエラーになってしまいまして、なんとかファイルが存在するか否かを判定するメソッドが組めないかと思案しておりました。

takochan1192

2021/08/05 02:52

もし、何かよい方法がございましたら、ご教示いただけますと幸いです。

hoshi-takanori

2021/08/05 03:00

目的のファイルがデプロイ先のサーバーにあるなら、いちいちクライアントからファイルの有無を確認するのではなく、デプロイ時に設定すべきことでは。(というか、客先ごとに切り替えるべき内容って、ロゴだけで良いんですか？)

takochan1192

2021/08/05 03:08

デプロイ時に設定するということは、config.tsなどのファイルに設定を書けばよろしいのでしょうか。客先ごとに切り替えるべき内容は、ロゴだけではないのですが、後の情報は、必ず入ってくる予定なのです。ロゴだけファイルが存在しないケースがあるため、非常に困っておりました。

hoshi-takanori

2021/08/05 03:21

すでに設定ファイルがあるなら、それにロゴの有無も書くようにするのが良いと思います。デプロイ時にスクリプトを動かしたりするなら、その時に設定内容と実際のファイルの有無をチェックできますし。 (ついでに、客先ごとにロゴのファイル名を変えると、同じファイル名で内容の違う画像と取り違えたりしなくていいかも。思いつきですが。)

takochan1192

2021/08/05 05:21

ありがとうございます。色々と検討してみます。