Express에서 HTML을 뷰 엔진으로 사용하려면 어떻게합니까?

130

나는 씨앗 에서이 간단한 변경을 시도하고 해당 .html 파일 (예 : index.html)을 만들었습니다.

//app.set('view engine', 'jade');
app.set('view engine', 'html');

이 파일은 동일하게 유지되었습니다.

exports.index = function(req, res){
  res.render('index');
};

그러나 달리는 동안 나는 얻는다

500 오류 : 'html'모듈을 찾을 수 없습니다

'ejs'를 사용하는 유일한 옵션입니까? 내 의도는 AngularJS와 함께 일반 HTML을 사용하는 것이 었습니다.

html node.js express

— 훌리오
소스

7

답변은 다음 주제를 참조하십시오. stackoverflow.com/questions/4529586/… 이것이 도움이

— roland

3

app.engine ( 'html', require ( 'ejs'). renderFile);

— Dinesh Kanivu

91

다른 링크의 답변은 효과가 있지만 HTML을 제공하기 위해 펑키 라우팅을 설정하지 않는 한 뷰 엔진을 전혀 사용할 필요가 없습니다. 대신 정적 미들웨어를 사용하십시오.

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

— 댄 콘
소스

3

계속해서 app.set ( 'view engine', html)에 대한 참조를 주석 처리했습니다. 그런 다음 "기본 엔진이 지정되지 않았으며 확장명이 제공되지 않았습니다"라는 오류 메시지가 표시됩니다. 그러나 res.render ( "index")를 res.render ( "index.html")로 변경하면 다음 오류가 발생합니다. TypeError : 개체 # <View>의 속성 'engine'이 함수가 아닙니다.

— Julio

4

더 이상 뷰 엔진이 없으므로 더 이상 res.render()작동 하지 않을 것이라고 생각 합니다. 대신 원시 HTML 파일을 넣고 public정적 미들웨어가 파일을 직접 처리하도록하십시오. 이보다 더 멋진 경로가 필요한 경우 고유 한 HTML보기 엔진을 설정할 수 있습니다.

— Nick McCurdy

6

그렇다면 app.get () 호출에서 무엇을 작성합니까?

— ajbraus

5

@ajbraus app.get () 호출이 전혀 필요하지 않습니다. 이것은 / public 폴더에있는 모든 html 파일을 직접 제공합니다. 브라우저에서 html을 바로 가리키면됩니다. 기본적으로 라우팅이 없습니다

— dm76

내가 겪고있는 문제는로드 된 페이지를 새로 고치면 오류 : 오류가 발생했습니다. 기본 엔진이 지정되지 않았으며 확장명이 제공되지 않았습니다. 그런 다음 Auth, {provide : LocationStrategy, useClass : HashLocationStrategy}]를 사용하면 URL에 해시가 표시되어 다른 이유로 어려움이 있습니다. 이 주위에 방법이 있습니까?

— 우노

33

렌더 엔진이 jade 대신 html을 허용하도록하려면 다음 단계를 수행하십시오.

디렉토리에 콘솔 을 통합 하고 설치 하십시오.
```
 npm install consolidate
 npm install swig
```

app.js 파일에 다음 줄을 추가하십시오.

var cons = require('consolidate');

// view engine setup
app.engine('html', cons.swig)
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');

“views”폴더 안에 .html로 뷰 템플릿을 추가하십시오. 노드 서버를 다시 시작하고 브라우저에서 앱을 시작하십시오.

이것이 아무런 문제없이 html을 렌더링하지만 JADE를 배우는 것이 좋습니다. Jade는 놀라운 템플릿 엔진이며이를 배우면 더 나은 디자인 및 확장 성을 달성하는 데 도움이됩니다.

— 아난드 샨 바흐
소스

모든 단계 후에 '엔진'방법이 없습니다

— ImranNaqvi

어떤 Express 버전을 사용하고 있습니까? Express 4.x에는 app.engine API가 포함되어 있습니다. 자세한 내용은 @ expressjs.com/en/api.html#app.engine

— AnandShanbhag

잘 했어! 나는 한 살짜리 답변이 처음으로 작동하는 것을 좋아합니다.

— Matthew Snell

왜 여전히 내 CSS와 기타를 렌더링 할 수 없습니다

— exe

23

apps.js에 추가하십시오.

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

이제 뷰 파일을 .html로 유지하면서 ejs 뷰 엔진을 사용할 수 있습니다

출처 : http://www.makebetterthings.com/node-js/how-to-use-html-with-express-node-js/

이 두 패키지를 설치해야합니다.

`npm install ejs --save`
`npm install path --save`

그런 다음 필요한 패키지를 가져옵니다.

`var path = require('path');`

이렇게하면 뷰 를 .ejs 대신 .html 로 저장할 수 있습니다 . html을 지원하지만 ej를 인식하지 못하는 IDE로 작업하는 동안 매우 유용합니다.

— 수단 슈 굽타
소스

1

app.set ( 'views', path.join (__ dirname, '/ path / to / your / folder')); app.set ( "view options", {layout : false}); app.engine ( 'html', function (path, opt, fn) {fs.readFile (path, 'utf-8', function (error, str) {if (error) return str; return fn (null, str) ;});});

— nilakantha singh deo

16

서버 구성에 이것을 시도하십시오

app.configure(function() {
    app.use(express.static(__dirname + '/public'));         // set the static files location
    app.use(express.logger('dev'));                         // log every request to the console
    app.use(express.bodyParser());                          // pull information from html in POST
    app.use(express.methodOverride());                      // simulate DELETE and PUT
    app.use(express.favicon(__dirname + '/public/img/favicon.ico'));
});

경로에 대한 콜백 함수는 다음과 같습니다.

function(req, res) {
    res.sendfile('./public/index.html');
};

— 코너 리치
소스

14

간단한 일반 HTML 파일로 각도를 사용하려는 경우 뷰 엔진이 필요하지 않습니다. 방법은 다음과 같습니다. route.js파일에서 :

router.get('/', (req, res) => {
   res.sendFile('index.html', {
     root: 'yourPathToIndexDirectory'
   });
});

— 애 쉬쉬 라왓
소스

1

절대적으로 가장 쉬운 솔루션입니다. 뷰 엔진이 설치 / 구성되어 있지 않고 HTML이 전송됩니다.

— Newclique

7

https://www.npmjs.com/package/express-es6-template-engine- 매우 가볍고 놀랍도록 빠른 템플릿 엔진을 사용하는 것이 좋습니다 . expressjs 없이도 작동 할 수 있으므로 이름이 약간 오도됩니다.

express-es6-template-engine앱 에 통합 하는 데 필요한 기본 사항 은 매우 간단하고 구현하기가 매우 쉽습니다.

const express = require('express'),
  es6Renderer = require('express-es6-template-engine'),
  app = express();
  
app.engine('html', es6Renderer);
app.set('views', 'views');
app.set('view engine', 'html');
 
app.get('/', function(req, res) {
  res.render('index', {locals: {title: 'Welcome!'}});
});
 
app.listen(3000);

스 니펫 확장

index.html파일 의 내용은 'views'디렉토리 안에 있습니다.

<!DOCTYPE html>
<html>
<body>
    <h1>${title}</h1>
</body>
</html>

— 디딘 코
소스

4

대답은 매우 간단합니다. * .html 페이지를 렌더링하려면 app.engine ( 'html')을 사용해야합니다. 문제를 해결해야합니다.

app.set('views', path.join(__dirname, 'views'));
**// Set EJS View Engine**
app.set('view engine','ejs');
**// Set HTML engine**
app.engine('html', require('ejs').renderFile);

.html 파일이 작동합니다

— 디 네쉬 카니 부
소스

2

불완전한 답변. 이러한 변경은 어디에서 이루어 집니까? app.js를 가정하지만 답변은 구체적이어야합니다. 또한이 세 가지 변경 / 추가 만 수행 한 결과가 "모듈 'ejs'를 찾을 수 없음"이므로 변경이 필요한 것은 아닙니다. 당신의 대답은 아마도 가깝지 만 조금 더 많은 정보를 추가해야합니다.

— Newclique

또한 렌더링은 파일을 제공하는 것과 다릅니다. 렌더링에는 서버가 파일을 사전 처리하고 render 메소드에 전달 된 동적 컨텐츠를 추가해야합니다. 어쩌면 그것은 OP가 원했던 것이지만 일부 사람들은 렌더링과 봉사를 혼동합니다. 매우 다른 개념.

— Newclique

@는 ejs 파일이 아닌 html 파일을 렌더링하는 데 사용됩니다.

— Dinesh Kanivu

3

ejs 엔진을 사용하여 HTML 파일을 렌더링 할 수 있습니다.

app.set('view engine', 'ejs');

"/ views"아래의 파일 이름이 ".ejs"인지 확인하십시오.

예를 들어 "index.ejs"입니다.

— JerryFZhang
소스

작동하지만 약간 해키 느낌입니다. .html 대신 .ejs를 사용할 때주의해야 할 사항이 있습니까? 아마도 가장 빠른 수정을 위해 건배는 모두 똑같이 제안했습니다!

— mikeym

3

HTML 미들웨어 주석

//app.set('view engine', 'html');

대신 다음을 사용하십시오.

app.get("/",(req,res)=>{
    res.sendFile("index.html");
});

— 시밤 체 트리
소스

2

html은 뷰 엔진이 아니지만 ejs는 그 안에 html 코드를 작성할 수있는 가능성을 제공합니다

— 웨일 쵸 르판
소스

1

라우팅을 통해 서버 HTML 페이지에 연결했습니다.

var hbs = require('express-hbs');
app.engine('hbs', hbs.express4({
  partialsDir: __dirname + '/views/partials'
}));
app.set('views', __dirname + '/views');
app.set('view engine', 'hbs');

.html 파일의 이름을 .hbs 파일로 변경했습니다.-핸들 바는 일반 HTML을 지원합니다

— 아비 나쉬
소스

1

렌더 엔진이 jade 대신 html을 허용하도록하려면 다음 단계를 수행하십시오.

Install consolidate and swig to your directory.

 npm install consolidate
 npm install swig

add following lines to your app.js file

var cons = require('consolidate');

// view engine setup
app.engine('html', cons.swig)
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');

add your view templates as .html inside “views” folder. Restart you node server and start the app in the browser.

이 작동합니다

— Md Mehadi Hasan Mozumder
소스

1

이 간단한 해결책을 시도해보십시오.

app.get('/', function(req, res){
    res.render('index.html')
  });

— Kiryamwibo Yenusu
소스

1

당신은 모든 라인을 추가해야합니다, 이것 자체로는 작동하지 않습니다.

— MushyPeas

1

ejs 템플릿 설치

npm install ejs --save

app.js에서 ejs 참조

app.set('views', path.join(__dirname, 'views'));`
app.set('view engine', 'ejs');

views / indes.ejs와 같은 뷰에서 ejs 템플릿 생성 및 라우터에서 ejs tempalte 사용

router.get('/', function(req, res, next) {
    res.render('index', { title: 'Express' });
});

— kta
소스

0

swig의 도움으로 HTML 템플릿을 렌더링하십시오.

//require module swig    
    var swig = require('swig');

// view engine setup    
    app.set('views', path.join(__dirname, 'views'));
    app.engine('html', swig.renderFile);
    app.set('view engine', 'html');

— 하렌 드라 싱
소스

0

HTML 파일은 렌더링 할 필요가 없습니다.
렌더링 엔진이하는 일은 Html 파일이 아닌 파일을 Html 파일로 바꾸는 것입니다.
HTML 파일을 보내려면 다음을 수행하십시오.

res.sendFile("index.html");

__dirname+"/index.html"express가 정확한 경로를 알 수 있도록 사용해야 할 수도 있습니다 .

— 기드온 맥스
소스