ノードエクスプレスでスタティックファイルを提供するときの正しいスクリプトパスは何ですか？

私はいつもスクリプトの正しいパスを見つけるのに問題があり、私のパスが正しいので静的なファイルを提供する方法が原因であるに違いありません。私のコードでは、具体化フレームワークを含めることを試みていますが、そのフレームワークが見つからず、理由を理解できません。私は（私は信じて）私は右のパスを使用index.htmlを/ブラウザから/ブラウザノードエクスプレスでスタティックファイルを提供するときの正しいスクリプトパスは何ですか？

app.use(express.static(path.join(__dirname, '../browser')));

に自分のファイルをアップに役立つが、その動作していません。私は同じミスを続けていないので、どんな助けも素晴らしいだろう！どうもありがとうございました！

便/サーバー/ app.js

var express = require('express'); 
    var path = require('path'); 
    var morgan = require('morgan'); 
    var bodyParser = require('body-parser'); 

    var app = express(); 
    module.exports = app; 
    app.use(morgan('dev')); 


    app.use(express.static(path.join(__dirname, '../browser'))); 
    app.use(bodyParser.urlencoded({ 
     extended: false 
    })); 
    app.use(bodyParser.json()); 

    var PORT = process.env.PORT || 1337; 
    app.listen(PORT, function() { 
     console.log('Server is listening on port 1337!'); 
    });

便/ブラウザ/ index.htmlを

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Title of the document</title> 
     <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no"> 
     <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
     <link type="text/css" rel="stylesheet" href="../materialize/css/materialize.min.css" media="screen,projection" /> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <script type="text/javascript" src="../materialize/js/materialize.min.js"></script> 
     <script src="flight.js"></script> 
    </head> 

    <body> 
     The content of the document...... 
    </body> 
    </html>

私の構造：あなたがする必要があることを理解することが

flights 
    browser 
     index.html 
     flights.js 
    server 
     app.js 
    css 
    style.css 
    materialize 
     css 
     materialize.min.css 
     fonts 
     js 
     materialize.min.js

出典

2017-07-12 javascripting

最初のものcss、jsなどの静的ファイルをすべてcssやjsなどのサブフォルダを持つフォルダに配置します。

あなたの構造は、あなたのルートプロジェクトディレクトリ内のパブリックのような単一のフォルダでなければなりません。そのパブリックフォルダの中に、css、jsなどのフォルダを置いてください。

また、このライン

app.use(express.static(path.join(__dirname, '../browser')));

は完全に間違っています。この

app.use(express.static(path.join(__dirname, 'public')));

公衆のようなものを使用して、すべての静的ファイル

を含むフォルダであるあなたのcssフォルダにマテリアライズのフォルダを置くことさてURLが何かになりますいくつかのmaterialise.cssファイルが含まれていると仮定し

http://localhost:3000/css/materialize/materialise.css

のようにまたチェックアウトexpress static files

出典

2017-07-12 19:20:36

ありがとうございました！ですから、materializeフォルダをパブリックフォルダに入れ、パブリックフォルダからすべてのファイルを提供すると、materializeが見つかりました。しかし、私はすべてのファイルを同じフォルダに入れたくないので、パスについて理解しようとします。私はjsファイルにブラウザのフォルダを洞察した。私は今私のjsファイルへのパスを持っている私のフライト/ public/index.htmlファイルを洞察します：（.. app.use（express.static（ 'browser'）を追加しました） /browser/flights.js '。それは動作しません。あなたはなぜ？パスが正しいことを説明してください+私はファイルにブラウザのフォルダの洞察を提供します。ありがとうございます！ – javascripting

静的ファイルは、あなたのhtml CSSプロジェクトで通常のように参照されません。 express.static（ 'browser'）を使用すると、このフォルダはルートパスとして設定され、browser/index.jsのようなファイルにアクセスする場合は、http：// localhost：3000/index.jsとなります。静的なファイルのパスを 'index.js'というパスに入れて、http：// localhost：3000/index.jsに変換したい場合は、上で説明した –

私はあなたが正しいかどうかわかりません。私がブラウザから自分のファイルを提供する場合、すべてのファイルのインサイトブラウザを提供しているので、index.js（public/index.htmlから）のパスはbrowser/index.jsではなくindex.jsだけになります。あれは正しいですか？また、index.htmlファイルから他のファイルにアクセスするにはどうしたらいいですか？たとえば、モジュールをインストールする場合は、index.htmlからモジュールにアクセスする必要があります。また、server/app.jsファイル内のすべてのノードモジュールを提供する必要がありますか、またはそれらを提供できず、index.htmlからアクセスできますか？答えて助けてくれてありがとう！ – javascripting

ノードエクスプレスでスタティックファイルを提供するときの正しいスクリプトパスは何ですか？

答えて

関連する問題