皆さんこんにちは、Xionxiongです。WeChat 公開アカウントのフォローを歓迎します: Xiongxiong の小さな教室
序文
日々のプロジェクトの中で、このような場面に遭遇することもよくあるでしょう。
写真やビデオなどのリソースをサーバーにアップロードし、アップロード後、ファイルのパスをデータベースに保存し、フロントエンドで使用するときにアップロードされたファイルをそのパスから直接取得します。
では、vueプロジェクトでは、ファイルをサーバーにアップロードした後、アップロードされたファイルをドメイン名を介して取得するにはどうすればよいでしょうか? 今日は見てみましょう。
解決プロセス
問題に遭遇したとき、私はいつも手元にあるchatptソフトウェアを開いてclaude質問するのですが、その答えは満足のいくものではありませんでした:
質問:
vue プロジェクトの場合、サーバー上にディレクトリがあります。ドメイン名は? ファイル
回答:
ドメイン名を使用して Vue プロジェクト内のファイルにアクセスするには、次の構成が必要です。
- Vue プロジェクトのルート ディレクトリに vue.config.js ファイルを作成し、publicPath 構成を追加します。
module.exports = {
publicPath: '/文件目录名称/'
}
たとえば、ファイル ディレクトリ名が myfiles の場合、構成は次のようになります。
module.exports = {
publicPath: '/myfiles/'
}
- ファイル ディレクトリ myfile を、サーバー上の Vue プロジェクトと同じレベルの場所にコピーします。
- サーバー上でこのディレクトリへのアクセス パスを設定します。たとえば、Nginx で次の場所を構成します。
location /myfiles/ {
alias /path/to/myfiles/; # 指向实际目录位置
}
- 構成を有効にするには、サーバーを再起動します。
- Vue プロジェクトでは、/myfiles/ ファイルの相対パスを介してこれらのファイルにアクセスできます。
たとえば、ファイルのディレクトリ構造は次のようになります。
- Vueプロジェクト
- view.config.js
- 公共
- インデックス.html
- マイファイル
- ファイル.txt
- nginx.conf
vue.config.js:
module.exports = {
publicPath: '/myfiles/'
}
nginx.conf:
location /myfiles/ {
alias /path/to/myfiles/;
}
これで、Vue プロジェクトの /myfiles/file.txt を通じて、myfiles ディレクトリ内の file.txt ファイルにアクセスできるようになります。
それの訳は：
- vue.config.js の publicPath は、/myfiles/ で始まる静的リソース パスを解決するように Vue に指示します。
- nginx は /myfiles/ を実際のファイル ディレクトリにマップするため、/myfiles/file.txt をリクエストすると実際の file.txt ファイルにアクセスします。
- Vue プロジェクト内の publicPath で始まる静的ファイルのパスは webpack によって処理され、対応する場所にデプロイされます。
したがって、この構成により、ドメイン名を介してサーバー上の任意のディレクトリにあるファイルにアクセスできるようになります。これが、Vue プロジェクトで外部リソースにアクセスするのに役立つことを願っています。
claude他のディレクトリにあるファイルではなく、サーバー上の vue プロジェクトのリソースにアクセスしたいようであることがわかります。そのため、この答えは間違いなく機能しません。
そこで私は自分でいくつかの研究をしました。
解決
解決策は非常に簡単のようです。nginx内部で設定するだけで済みます。設定情報は次のとおりです。
location /video/ {
alias /life/chx/;
}
ファイルの下には、/life/chx/アップロードした写真とビデオがあります。
ちょっと見てみては？
この信息爆炸時代では、毎日本当に注意を払う価値のあるものを見つけるのは簡単ではありません新闻事件。雄雄的小课堂公式アカウントは、毎日の最も重要なニュースイベントを厳選し、最も重要なニュースコンテンツを提供することに専念しています。政治、経済、社会、エンタメ、スポーツなどの注目ニュースを毎朝雄雄的小课堂約40本配信し、1日の注目の出来事をいち早く把握できます。
雄雄的小课堂「新鮮さと実用性」の原則に従って、不必要なゴシップや奇妙な記事は掲載せず、最も本物で信頼できるニュースレポートのみを読者に提供します。キーワードの注釈と組み合わせた簡潔なニュースの説明により、ニュースの核となる要素を簡単に取得できます。同時に、ニュースの権威性と信頼性を確保するために、ニュース写真と情報源が提供されます。
情報はたくさんありますが、じっくり読む時間がありませんか? 小さな教室があなたのために最も重要なニュースコレクションを賢く選択します。ニュースは幅広く、分散していないため、雄雄的小课堂選択肢が与えられます。毎日、話題のニュースをいち早くキャッチしたいなら、雄雄的小课堂公式アカウントが最適です。