Question

我正在构建一个应用程序，并且试图发送一封电子邮件，其中使用Pug作为模板引擎，但是在将静态文件加载到模板中时遇到问题。我的代码成功地将项目的公用文件夹设置为静态文件夹，并且能够在浏览器中访问文件的内容。

但是，当我使用相对于公共目录的相对路径时，文件没有加载到我的Pug模板中。我还尝试指定它们实际有效的绝对路径。

我的应用程序的目录结构是：

app

+/public

  +/css

    style.css

  image.png

+/src

  +/client

  +/server

    +/templates

      +/verify

        html.pug

        text.pug

    +server.js

server.js

require('dotenv').config({path: __dirname + "/../../.env"});
const path = require('path');

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

const cors = require('cors');
const bodyParser = require('body-parser');

app.use(cors());
app.use(bodyParser.urlencoded({extended: true }));
app.use(bodyParser.json());

app.set('view engine', 'pug');
app.use(express.static(path.join(__dirname, '../../', 'public')));

const nodemailer = require('nodemailer');
const Email = require('email-templates');

const transporter = nodemailer.createTransport({
  address: 'smtp.gmail.com',
  host: 'smtp.gmail.com',
  port: 465,
  secure: true,
  service: 'gmail',
  auth: {
    user: process.env.SENDER_EMAIL,
    pass: process.env.SENDER_PASS
  },
  authentication: 'plain',
  enable_stattls_auto: true
});

const email = new Email({
  transport: transporter,
  views: {
    root: './templates'
  },
  send: true,
  preview: false
});

email.send({
  template: 'verify',
  message:  {
    from: process.env.SENDER_EMAIL,
    to: '*email*',
    subject: 'Activise - Email Verification',
  },
  locals: {}
})
.then(() => console.log('EMAIL SENT'))
.catch(err => console.log("ERROR: " + err));

app.listen(port, () => console.log('Server listening for requests on port 8080!'))

这也是我的哈巴狗代码

html.pug

doctype html
html
    head
        title=title
        link(rel="stylesheet", href="/css/style.css" type="text/css")
    body
        .email-text
            img(src="/image.png", alt="Application logo")

Answer 1

在server.js中

更改

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

到

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

还将您的哈巴狗更改为此

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

通过Express.js中设置的静态文件目录无法在Pug中加载静态文件

1 个答案: