Express で静的ファイルをホストする方法-jsチュートリアル-php.cn

Express で静的ファイルをホストする方法

php中世界最好的语言

リリース： 2018-06-04 10:48:55

オリジナル

1581 人が閲覧しました

今回は、Express を使用して静的ファイルをホストする方法と、Express を使用して静的ファイルをホストする際の注意事項を説明します。実際のケースを見てみましょう。

ミドルウェアexpress.static

expressを使用してディレクトリを初期化すると、app.jsで多くのapp.useが表示されます。

主要なミドルウェアの 1 つは、express.static (このミドルウェアはバージョン 4.0 にも残されています)

var express = require('express');
var app = express();
app.use('/static',express.static('public'));

ログイン後にコピー

Express.static は、静的ファイル、js、css、img などをホストするのに役立ちます。

express.staticは

を使用します基本的には

を使用しますプロジェクトディレクトリのpublicの下にcss、js、imgなどのフォルダーがあります。

サーバーの起動時にデータにアクセスできるように、Express 経由でホストする必要があります。

app.js に

var express = require('express');
var app = express();
app.use(express.static('public'));

ログイン後にコピー

を追加すると、

http://localhost:3000/css/style.css

http://localhost:3000/js/style.js
http://localhost を渡すことができます。 3000/img/style.png

注:すべてのファイルのパスは保存ディレクトリからの相対パスであるため、静的ファイルが保存されているディレクトリ名は URL に表示されません。

仮想ディレクトリ

は、静的リソースディレクトリのマウントパスを指定することで実装されます。

静的ファイルに仮想ディレクトリを追加できます。これにより、URL を統一した方法で管理しやすくなり、リソースの

var express = require('express');
var app = express();
app.use('static',express.static('public'));

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vueを操作してパスの#記号を削除する方法

vueを使用して空白をクリックしてdiv実装を非表示にする方法

以上がExpress で静的ファイルをホストする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。