ホームページ  >  記事  >  ウェブフロントエンド  >  Express で静的ファイルをホストする方法

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

php中世界最好的语言
php中世界最好的语言オリジナル
2018-06-04 09:45:381554ブラウズ

今回は、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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。