programing

Express-js가 내 정적 파일을 가져올 수 없습니다. 왜죠?

iphone6s 2023. 5. 22. 20:48
반응형

Express-js가 내 정적 파일을 가져올 수 없습니다. 왜죠?

코드를 가장 간단한 express-js 앱으로 축소했습니다.

var express = require("express"),
    app = express.createServer();
app.use(express.static(__dirname + '/styles'));
app.listen(3001);

내 디렉토리는 다음과 같습니다.

static_file.js
/styles
  default.css

가 지하만내접때에 접속할 때.http://localhost:3001/styles/default.css다음 오류가 발생합니다.

Cannot GET / styles /
default.css

는 중용사를 합니다.express 2.3.3그리고.node 0.4.7내가 뭘 잘못하고 있는 거지?

ㅠㅠhttp://localhost:3001/default.css.

가지기 위해/stylesURL에 URL을합니다.

app.use("/styles", express.static(__dirname + '/styles'));

이 페이지의 예를 보십시오.

//Serve static content for the app from the "public" directory in the application directory.

    // GET /style.css etc
    app.use(express.static(__dirname + '/public'));

// Mount the middleware at "/static" to serve static content only when their request path is prefixed with "/static".

    // GET /static/style.css etc.
    app.use('/static', express.static(__dirname + '/public'));

저도 같은 문제가 있어요.다음 코드의 문제를 해결했습니다.

app.use('/img',express.static(path.join(__dirname, 'public/images')));
app.use('/js',express.static(path.join(__dirname, 'public/javascripts')));
app.use('/css',express.static(path.join(__dirname, 'public/stylesheets')));

정적 요청 예:

http://pruebaexpress.lite.c9.io/js/socket.io.js

저는 좀 더 간단한 해결책이 필요합니다.존재합니까?

이 작업은 다음과 같습니다.

app.use('*/css',express.static('public/css'));
app.use('*/js',express.static('public/js'));
app.use('*/images',express.static('public/images'));

default.css 있다니습수에서 이용할 수 입니다.http://localhost:3001/default.css

그stylesapp.use(express.static(__dirname + '/styles'));그냥 속달에게 검색하라고 말합니다.styles제공할 정적 파일의 디렉터리입니다.그러면 사용 가능한 경로의 일부가 되지 않습니다.

server.js:

var express   =     require("express");
var app       =     express();
app.use(express.static(__dirname + '/public'));

express와 app를 별도로 선언하고 'public' 또는 원하는 대로 폴더를 생성한 후 이러한 폴더에 액세스할 수 있습니다.템플릿 src에서 /public의 상대 경로(또는 정적 파일에 대한 폴더 destiny의 이름)를 추가했습니다.노선의 바를 조심하세요.

저는 애플리케이션에서 부트스트랩 CSS, JS, 폰트를 사용하고 있습니다.는 라는폴만습다니라는 .asset앱의 루트 디렉터리에 모든 폴더를 배치합니다.그런 다음 서버 파일에 다음 행이 추가되었습니다.

app.use("/asset",express.static("asset"));

이 하면 이줄사면에있파로있다에 할 수 .asset의 /asset 경로접사:http://localhost:3000/asset/css/bootstrap.min.css.

이제 아래와 같이 보기에 CSS와 JS를 간단히 포함할 수 있습니다.

<link href="/asset/css/bootstrap.min.css" rel="stylesheet">

저에게 효과가 있었던 것은 다음과 같습니다.

당신의 앱에 쓰는 대신에.js.

간단히 쓰기

즉, 경로에서 루트 디렉터리 이름을 제거합니다.그런 다음 다른 js 파일에서 정적 경로를 효과적으로 사용할 수 있습니다. 예:

<img src="/images/misc/background.jpg">

이것이 도움이 되길 바랍니다 :)

정적 파일(파일, 파일, 파일)을 제공하려면 다음 두 단계를 수행합니다.

  1. CSS 파일의 디렉터리를 built in middleware express.static에 전달합니다.

    var express = require('express');
var app = express();
/*public is folder in my project directory contains three folders
css,image,js
*/
//css  =>folder contains css file
//image=>folder contains images
//js   =>folder contains javascript files
app.use(express.static( 'public/css'));

  2. CSS 파일 또는 이미지에 액세스하려면 url http://localhost:port/localhost.http://localhost:8081/bootstrap.http를 입력하십시오.

참고: css 파일을 html just type에 연결합니다.<link href="file_name.css" rel="stylesheet">

만약 내가 이 코드를 쓴다면,

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

정적 파일에 액세스하려면 url:localhost:port/messages/bootstrap.vmx ex:http://localhost:8081/messages/bootstrap.vmx를 입력합니다.

css 파일을 html과 연결하려면 다음 행을 추가하십시오.

<link href="css/file_name.css" rel="stylesheet">

이것은 나에게 효과가 있었습니다.

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

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

app.use('/shopping-cart/javascripts',express.static(path.join(__dirname, 'public/javascripts')));

app.use('/shopping-cart/stylesheets',express.static(path.join(__dirname, 'public/stylesheets')));

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

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

웹 팩은 상황을 어색하게 만듭니다.

이미 존재하는 다른 모든 솔루션에 대한 보완책으로:

및: 파일 및 디렉터리의 경로를 지정할 수 있습니다.cwd 디렉터리 (으)ㄹ 수 있는 경우, (으)ㄹ 수 있는 경우, (으)ㄹ 수 있는 처럼 정상적으로 합니다.cwd당신이 시작했을 때 있었던 폴더입니다.node(또는)npm start,yarn run

하지만...

만약 당신이 웹팩을 사용하고 있다면,__dirname의 행동은 여러분의 행동에 입니다.node.__dirname설정 및 웹 팩 버전:

  1. v4에서 Webpack v4의 .__dirname 당한입니다./여기에 기록된 바와 같이
    • 하도록 할 수 . 즉, 이 경 일 우 추 의 v5 값 처 럼 기 작 니 합 동 다 본 여 하 가 이 를 구 성 반 로 으 적 에 ▁in 니 합 다 동작5▁which▁you▁to ▁like이▁it▁to럼▁this▁usually처▁add▁the5값▁config▁v▁makes,▁act▁want▁your▁that▁is▁this기본▁in__filename그리고.__dirname이제 출력 파일에 대해 있는 그대로 동작합니다.
      module.exports = {
   // ...
   node: {
     // generate actual output file information
     // see: https://webpack.js.org/configuration/node/#node__filename
     __dirname: false,
     __filename: false,
   }
};
    • 이것은 또한 여기서 논의되었습니다.
  2. Webpack v5에서 여기에 있는 설명서에 따르면 기본값은 이미 다음과 같습니다.__filename그리고.__dirname출력 파일에 대해 있는 그대로 동작하므로 v4에 대한 구성 변경과 동일한 결과를 얻을 수 있습니다.

예

예를 들어, 다음과 같이 가정합니다.

  • 정을려고합니다하를 .publicfolder
  • 출력 옆에 있습니다(일반적으로).dist이며, 가 없습니다. 하위 폴더가 없습니다.dist 거예요.
const ServerRoot = path.resolve(__dirname /** dist */, '..');
// ...
app.use(express.static(path.join(ServerRoot, 'public'))

(중요: 다시 말하지만, 이것은 원본 파일의 위치와는 무관하며 출력 파일의 위치만 확인합니다!)

고급 웹 팩 시나리오

서로 다른 출력 디렉토리에 여러 진입점이 있으면 상황이 더 복잡해집니다.__dirname동일한 파일이 출력 파일(즉, 각 파일)에 대해 다를 수 있습니다.entry), 이 원본 파일이 병합된 출력 파일의 위치에 따라 동일한 원본 파일이 여러 개의 서로 다른 출력 파일로 병합될 수도 있습니다.

도 있고 수 을 사용하여 .DefinePlugin 는또.EnvironmentPlugin.

빙의문제를 제공하는 것의 .__dirname은 것은입니다.__dirname프로젝트 파일이 아닌 현재 파일의 경로를 반환합니다.또한 동적 헤더를 사용하는 경우 각 페이지는 다른 경로에 있는 정적 파일을 찾아 작동하지 않습니다.나에게 가장 좋은 것은 대체하는 것입니다.__dirname위해서process.cwd()항상 프로젝트 파일의 경로를 제공합니다.

app.use(express.static(process.cwd() + '/public'));

그리고 당신의 프로젝트에서:

link rel="stylesheet" href="/styles/default.css"

참고: process.cwd()와 __dirname의 차이점은 무엇입니까?

사용하고 있었습니다.

app.use(express.static('public'))

공용 폴더에 이름을 가진 파일이 없을 때index.html.

브라우저에서 다음 오류가 발생했습니다.

"얻을 수 없음 /"

제가 파일 이름을 'index.html'로 바꿨을 때 잘 작동합니다.

http://localhost:3001/default.css를 사용하여 액세스해 보십시오.

   app.use(express.static(__dirname + '/styles'));

당신은 실제로 당신의 교외가 아닌 폴더, 즉 스타일의 이름을 부여하고 있습니다.

CSS 파일을 찾아서 경로를 추가합니다.

app.get('/css/MyCSS.css', function(req, res){
  res.sendFile(__dirname + '/public/css/MyCSS.css');
});

그러면 효과가 있을 것 같습니다.

만약 당신의 상황이라면

myApp
  |
  |__ public
  |     |
  |     |__  stylesheets
  |     |     |
  |     |     |__ style.css
  |     |
  |     |___ img
  |           |
  |           |__ logo.png
  |
  |__ app.js

그리고나서,
app.js에 넣기

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

그리고 당신의 스타일을 참조하세요.java: (일부 .pug 파일에서):

link(rel='stylesheet', href='/static/stylesheets/style.css')

해라'./public'대신에__dirname + '/public'마찬가지로, 시도process.cwd() + '/public'.

작업 중인 디렉터리를 추적하지 못할 때가 있습니다. 파일이 있는 위치를 알려주는 곳에 파일이 있다고 가정하지 않는 것이 좋습니다.

마찬가지로, 의존성의 깊이에서 경로가 모든 수준에서 동일한 방식으로 해석된다고 가정하지 마십시오.

app.use(express.static(__dirname+'/'));

이것은 저에게 효과가 있었습니다. 저는 공용 디렉토리를 사용하려고 했지만 작동하지 않았습니다.하지만 이 경우에는 디렉터리에 있는 전체 정적 파일에 액세스할 수 있습니다. 도움이 되기를 바랍니다!

위에 추가하여 정적 파일 경로가 /(ex...)로 시작하는지 확인합니다./vmdk/mdk)...기본 디렉토리(/main) 위의 모든 디렉토리에서 정적 파일을 제공합니다.

  1. Nodejs 프로젝트에서 'public' 이름의 폴더 만들기
    폴더를 누릅니다.
  2. Nodejs 프로젝트 폴더에 index.html 파일을 넣습니다.
  3. 모든 스크립트와 CSS 파일을 공용 폴더에 넣습니다.

  4. 사용하다app.use( express.static('public'));

  5. 그리고.index.html스크립트의 올바른 경로<script type="text/javascript" src="/javasrc/example.js"></script>

이제 모든 것이 잘 작동합니다.

정적 디렉토리

위의 이미지(정적 디렉토리)에서 dir 구조를 확인합니다.

const publicDirectoryPath = path.join(__dirname,'../public')
app.use(express.static(publicDirectoryPath))


//  or

app.use("/", express.static(publicDirectoryPath))
app.use((req, res, next) => {
res.sendFile(path.join(publicDirectoryPath,'index.html'))

nodejs 파일에서

const express = require('express');
const app = express();

app.use('/static', express.static('path_to_static_folder'));

당신의 퍼그 파일에서.

...
script(type="text/javascript", src="static/your_javascript_filename")
...

"정적" 단어를 메모합니다.nodejs 파일과 pug 파일에서 동일해야 합니다.

이것은 나에게 효과가 있습니다.

서버:

app.use(express.static("public"));

고객:

<link href="css/styles.css" rel="stylesheet">
<img src="images/210504.png">

방금 이 버전(노드 v16.16.0)에 대한 변형이 발생하여 해결되었습니다.

폴더 구조:

    project
      apidoc
      src
        index.js (aka server.js, app.js)
        public
          images
          css

'public'의 정적 콘텐츠를 제공하고 있습니다.

    app.use(express.static('src/public'))

또한 apidocs(현재 폴더 위에 하나의 폴더)에서 api 문서를 제공하기를 원했습니다.이렇게 하면 안 됩니다.

    app.use('/apidoc', express.static('../apidoc')))
    // this didn't work either
    app.use('/apidoc', express.static('/absolute/path/to/apidoc')))

이것이 해결책이었습니다.

    import path from 'path'
    import { fileURLToPath } from 'url';
    const __filename = fileURLToPath(import.meta.url);
    const __dirname = path.dirname(__filename);

    app.use('/apidoc', express.static(path.join(__dirname, '../apidoc')))
    app.use(express.static('src/public'))

경로 구분 기호 문제가 의심됩니다.

나는 그냥 이 코드를 시도하고 작동합니다.

const exp = require('express');
const app = exp();

app.use(exp.static("public"));

그리고 일하는 것,

이전(작동하지 않음):

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

그냥 해보세요

언급URL : https://stackoverflow.com/questions/5924072/express-js-cant-get-my-static-files-why

반응형

'programing' 카테고리의 다른 글

OpenMappedExe구성 대OpenExe 구성  (0) 2023.05.22
Node.js에서 POST 데이터를 처리하는 방법은 무엇입니까?  (0) 2023.05.22
'Microsoft' 파일 또는 어셈블리를 로드할 수 없습니다.데이터.Edm'  (0) 2023.05.22
패키지 설치 방법.npm을 사용하는 현재 디렉터리의 json 종속성  (0) 2023.05.22
JQuery: 입력 필드에서 변경 사항 감지  (0) 2023.05.17

'programing'의 다른글

  • 현재글Express-js가 내 정적 파일을 가져올 수 없습니다. 왜죠?

관련글

댓글

티스토리툴바