Javascript Node.js（express）中视图子文件夹的pug呈现模板

当所有模板都位于“视图”文件夹中时，我们将成功渲染它们。我创建文件夹和视图的结构，然后内部模板在渲染时不可见

这是我的文件夹的结构，对于

render（）

app.js

    const createError = require('http-errors');
    const express = require('express');
    const path = require('path');
    const cookieParser = require('cookie-parser');
    const logger = require('morgan');

    const indexRouter = require('./routes/index');
    const usersRouter = require('./routes/users');

    const app = express();

    // view engine setup
    app.set('views', [path.join(__dirname, '/views'),
        path.join(__dirname, '/views/public'),
        path.join(__dirname, '/views/public/templates'),
        path.join(__dirname, '/views/public/fragments')]);
    app.set('view engine', 'pug');

    app.use(logger('dev'));
    app.use(express.json());
    app.use(express.urlencoded({extended: false}));
    app.use(cookieParser());
    app.use(express.static(path.join(__dirname, 'public')));

    app.use('/', indexRouter);
    app.use('/users', usersRouter);

    // catch 404 and forward to error handler
    app.use(function (req, res, next) {
        next(createError(404));
    });

    // error handler
    app.use(function (err, req, res) {
        // set locals, only providing error in development
        res.locals.message = err.message;
        res.locals.error = req.app.get('env') === 'development' ? err : {};

        // render the error page
        res.status(err.status || 500);
        res.render('error');
    });

    module.exports = app;

    const express = require('express');
    const router = express.Router();

    /* GET home page. */
    router.get('/', (req, res, next) => {
      res.render('index', {});
    });

    router.get('/about', (req, res, next) => {
      res.render('about_us.pug');
    });

    router.get('/portfolio', (req, res, next) => {
      res.render('portfolio');
    });

    router.get('/contacts', (req, res,next) => {
      res.render('/public/templates/contacts',{});
    });

     router.get('/products', (req, res, next) => {
      res.render('products.pug');
    });

    module.exports = router;

    extends views/layout

                    block content
                        h1 contacts

     html
        head
            title= title
           link(rel='stylesheet', href='/stylesheets/style.css')
        body
            include public/fragments/header
            block content

index.js

    const createError = require('http-errors');
    const express = require('express');
    const path = require('path');
    const cookieParser = require('cookie-parser');
    const logger = require('morgan');

    const indexRouter = require('./routes/index');
    const usersRouter = require('./routes/users');

    const app = express();

    // view engine setup
    app.set('views', [path.join(__dirname, '/views'),
        path.join(__dirname, '/views/public'),
        path.join(__dirname, '/views/public/templates'),
        path.join(__dirname, '/views/public/fragments')]);
    app.set('view engine', 'pug');

    app.use(logger('dev'));
    app.use(express.json());
    app.use(express.urlencoded({extended: false}));
    app.use(cookieParser());
    app.use(express.static(path.join(__dirname, 'public')));

    app.use('/', indexRouter);
    app.use('/users', usersRouter);

    // catch 404 and forward to error handler
    app.use(function (req, res, next) {
        next(createError(404));
    });

    // error handler
    app.use(function (err, req, res) {
        // set locals, only providing error in development
        res.locals.message = err.message;
        res.locals.error = req.app.get('env') === 'development' ? err : {};

        // render the error page
        res.status(err.status || 500);
        res.render('error');
    });

    module.exports = app;

    const express = require('express');
    const router = express.Router();

    /* GET home page. */
    router.get('/', (req, res, next) => {
      res.render('index', {});
    });

    router.get('/about', (req, res, next) => {
      res.render('about_us.pug');
    });

    router.get('/portfolio', (req, res, next) => {
      res.render('portfolio');
    });

    router.get('/contacts', (req, res,next) => {
      res.render('/public/templates/contacts',{});
    });

     router.get('/products', (req, res, next) => {
      res.render('products.pug');
    });

    module.exports = router;

    extends views/layout

                    block content
                        h1 contacts

     html
        head
            title= title
           link(rel='stylesheet', href='/stylesheets/style.css')
        body
            include public/fragments/header
            block content

联系人。帕格

    const createError = require('http-errors');
    const express = require('express');
    const path = require('path');
    const cookieParser = require('cookie-parser');
    const logger = require('morgan');

    const indexRouter = require('./routes/index');
    const usersRouter = require('./routes/users');

    const app = express();

    // view engine setup
    app.set('views', [path.join(__dirname, '/views'),
        path.join(__dirname, '/views/public'),
        path.join(__dirname, '/views/public/templates'),
        path.join(__dirname, '/views/public/fragments')]);
    app.set('view engine', 'pug');

    app.use(logger('dev'));
    app.use(express.json());
    app.use(express.urlencoded({extended: false}));
    app.use(cookieParser());
    app.use(express.static(path.join(__dirname, 'public')));

    app.use('/', indexRouter);
    app.use('/users', usersRouter);

    // catch 404 and forward to error handler
    app.use(function (req, res, next) {
        next(createError(404));
    });

    // error handler
    app.use(function (err, req, res) {
        // set locals, only providing error in development
        res.locals.message = err.message;
        res.locals.error = req.app.get('env') === 'development' ? err : {};

        // render the error page
        res.status(err.status || 500);
        res.render('error');
    });

    module.exports = app;

    const express = require('express');
    const router = express.Router();

    /* GET home page. */
    router.get('/', (req, res, next) => {
      res.render('index', {});
    });

    router.get('/about', (req, res, next) => {
      res.render('about_us.pug');
    });

    router.get('/portfolio', (req, res, next) => {
      res.render('portfolio');
    });

    router.get('/contacts', (req, res,next) => {
      res.render('/public/templates/contacts',{});
    });

     router.get('/products', (req, res, next) => {
      res.render('products.pug');
    });

    module.exports = router;

    extends views/layout

                    block content
                        h1 contacts

     html
        head
            title= title
           link(rel='stylesheet', href='/stylesheets/style.css')
        body
            include public/fragments/header
            block content

layout.pug

    const createError = require('http-errors');
    const express = require('express');
    const path = require('path');
    const cookieParser = require('cookie-parser');
    const logger = require('morgan');

    const indexRouter = require('./routes/index');
    const usersRouter = require('./routes/users');

    const app = express();

    // view engine setup
    app.set('views', [path.join(__dirname, '/views'),
        path.join(__dirname, '/views/public'),
        path.join(__dirname, '/views/public/templates'),
        path.join(__dirname, '/views/public/fragments')]);
    app.set('view engine', 'pug');

    app.use(logger('dev'));
    app.use(express.json());
    app.use(express.urlencoded({extended: false}));
    app.use(cookieParser());
    app.use(express.static(path.join(__dirname, 'public')));

    app.use('/', indexRouter);
    app.use('/users', usersRouter);

    // catch 404 and forward to error handler
    app.use(function (req, res, next) {
        next(createError(404));
    });

    // error handler
    app.use(function (err, req, res) {
        // set locals, only providing error in development
        res.locals.message = err.message;
        res.locals.error = req.app.get('env') === 'development' ? err : {};

        // render the error page
        res.status(err.status || 500);
        res.render('error');
    });

    module.exports = app;

    const express = require('express');
    const router = express.Router();

    /* GET home page. */
    router.get('/', (req, res, next) => {
      res.render('index', {});
    });

    router.get('/about', (req, res, next) => {
      res.render('about_us.pug');
    });

    router.get('/portfolio', (req, res, next) => {
      res.render('portfolio');
    });

    router.get('/contacts', (req, res,next) => {
      res.render('/public/templates/contacts',{});
    });

     router.get('/products', (req, res, next) => {
      res.render('products.pug');
    });

    module.exports = router;

    extends views/layout

                    block content
                        h1 contacts

     html
        head
            title= title
           link(rel='stylesheet', href='/stylesheets/style.css')
        body
            include public/fragments/header
            block content

头.帕格

    block header

    link(rel='stylesheet', href='./stylesheets/public/fragments/header.css')

    div
        ul
            li: a(href='/') Home
            li: a(href='/about') About
            li: a(href='/portfolio') Portfolio
            li: a(href='/contacts') Contact
            li: a(href='/products') Products

错误

错误：无法在视图目录“C:\Users\Xiaomi\IdeaProjects\online\u shop\u server\views”、“C:\Users\Xiaomi\IdeaProjects\online\u shop\u server\views\public”、“C:\Users\Xiaomi\IdeaProjects\online\u shop\u server\views\public\templates”或“C:\Users\Xiaomi\IdeaProject\online\u shop\u server\views\public\fragments” 在Function.render（C:\Users\Xiaomi\IdeaProjects\online\u shop\u server\node\u modules\express\lib\application.js:580:17） 在ServerResponse.render（C:\Users\Xiaomi\IdeaProjects\online\u shop\u server\node\u modules\express\lib\response.js:1008:7） 在C:\Users\Xiaomi\IdeaProjects\online\u shop\u server\routes\index.js:18:7 在Layer.handle[作为handle\u请求]（C:\Users\Xiaomi\IdeaProjects\online\u shop\u server\node\u modules\express\lib\router\Layer.js:95:5） 下一步（C:\Users\Xiaomi\IdeaProjects\online\u shop\u server\node\u modules\express\lib\router\route.js:137:13） 在Route.dispatch（C:\Users\Xiaomi\IdeaProjects\online\u shop\u server\node\u modules\express\lib\router\Route.js:112:3） 在Layer.handle[作为handle\u请求]（C:\Users\Xiaomi\IdeaProjects\online\u shop\u server\node\u modules\express\lib\router\Layer.js:95:5） 在C:\Users\Xiaomi\IdeaProjects\online\u shop\u server\node\u modules\express\lib\router\index.js:281:22 在Function.process参数处（C:\Users\Xiaomi\IdeaProjects\online\u shop\u server\node\u modules\express\lib\router\index.js:335:12） 下一步（C:\Users\Xiaomi\IdeaProjects\online\u shop\u server\node\u modules\express\lib\router\index.js:275:10）

---

我这样解决了我的问题：

-添加到

app.js

app.locals.basedir=path.join（uuudirname，'views'）；

，将默认路径添加到视图文件夹中所需的子文件夹。

    const createError = require('http-errors');
    const express = require('express');
    const path = require('path');
    const cookieParser = require('cookie-parser');
    const logger = require('morgan');

    const indexRouter = require('./routes/index');
    const usersRouter = require('./routes/users');

    const app = express();

    // view engine setup
    app.set('views', [path.join(__dirname, '/views'),
        path.join(__dirname, '/views/public'),
        path.join(__dirname, '/views/public/templates'),
        path.join(__dirname, '/views/public/fragments'),
        path.join(__dirname, '/views/public/templates/layout')]);
    app.set('view engine', 'pug');

    app.locals.basedir = path.join(__dirname, 'views');

    app.use(logger('dev'));
    app.use(express.json());
    app.use(express.urlencoded({extended: false}));
    app.use(cookieParser());
    app.use(express.static(path.join(__dirname, 'public')));

    app.use('/', indexRouter);
    app.use('/users', usersRouter);

    // catch 404 and forward to error handler
    app.use(function (req, res, next) {
        next(createError(404));
    });

    // error handler
    app.use(function (err, req, res) {
        // set locals, only providing error in development
        res.locals.message = err.message;
        res.locals.error = req.app.get('env') === 'development' ? err : {};

        // render the error page
        res.status(err.status || 500);
        res.render('error');
    });

    module.exports = app;

    const express = require('express');
    const router = express.Router();

    /* GET home page. */
    router.get('/', (req, res, next) => {
      res.render('index', {});
    });

    router.get('/about', (req, res, next) => {
      res.render('about_us',{});
    });

    router.get('/portfolio', (req, res, next) => {
      res.render('portfolio',{});
    });

    router.get('/contacts', (req, res,next) => {
      res.render('contacts',{});
    });

    router.get('/products', (req, res, next) => {
      res.render('products',{});
    });



    module.exports = router;

-在链接处理程序中

index.js

在更新视图文件夹中的文件夹结构和pug文件后，为模板添加了正确的路径。

    const createError = require('http-errors');
    const express = require('express');
    const path = require('path');
    const cookieParser = require('cookie-parser');
    const logger = require('morgan');

    const indexRouter = require('./routes/index');
    const usersRouter = require('./routes/users');

    const app = express();

    // view engine setup
    app.set('views', [path.join(__dirname, '/views'),
        path.join(__dirname, '/views/public'),
        path.join(__dirname, '/views/public/templates'),
        path.join(__dirname, '/views/public/fragments'),
        path.join(__dirname, '/views/public/templates/layout')]);
    app.set('view engine', 'pug');

    app.locals.basedir = path.join(__dirname, 'views');

    app.use(logger('dev'));
    app.use(express.json());
    app.use(express.urlencoded({extended: false}));
    app.use(cookieParser());
    app.use(express.static(path.join(__dirname, 'public')));

    app.use('/', indexRouter);
    app.use('/users', usersRouter);

    // catch 404 and forward to error handler
    app.use(function (req, res, next) {
        next(createError(404));
    });

    // error handler
    app.use(function (err, req, res) {
        // set locals, only providing error in development
        res.locals.message = err.message;
        res.locals.error = req.app.get('env') === 'development' ? err : {};

        // render the error page
        res.status(err.status || 500);
        res.render('error');
    });

    module.exports = app;

    const express = require('express');
    const router = express.Router();

    /* GET home page. */
    router.get('/', (req, res, next) => {
      res.render('index', {});
    });

    router.get('/about', (req, res, next) => {
      res.render('about_us',{});
    });

    router.get('/portfolio', (req, res, next) => {
      res.render('portfolio',{});
    });

    router.get('/contacts', (req, res,next) => {
      res.render('contacts',{});
    });

    router.get('/products', (req, res, next) => {
      res.render('products',{});
    });



    module.exports = router;

---

老问题，但其他人可能有类似的问题，这里是我的解决方案

我建议您在与

视图

文件夹（不在其中）相同的级别上创建

公共

目录。 然后使用

app.set（'view engine'，'pug'）；
应用程序集（“视图”、“视图”）；
app.use（express.static（path.join（uu dirname，'./public'））；

app.locals.basedir=path.join（u dirname，'views'）；app.js如果问题解决了，请将下面的解决方案作为答案发布并接受，以帮助未来的访问者。