Node.JS / Express應用程序中的Jade模板找不到外部Javascript文件？

Question

我有一個使用Jade模板引擎的Node.JS / Express應用程序。 我有一個JavaScript文件，該文件是目錄中的正上方我的看法目錄包含我的玉意見。 給定下面的代碼，我認為該視圖應該能夠找到引用的服務器端Javascript文件，名為 common_routines ，但是當請求該視圖時，我收到一個404錯誤，提示找不到外部Javascript文件。 這使我感到困惑，因為我認為Jade模板執行服務器端，那么為什么這會觸發Jade render()調用中的404 error ？

這是翡翠視圖：

block content
    script(src="../common_routines.js")
    div(style="padding:5px")
        h4 #{product.name}
    if (product.brand != null)
        p Brand: #{product.brand}
    div(class="img_and_desc")
        img(src=product.imageUrl, class="product_image", align="left")
        if (product.minimumPrice == product.maximumPrice)
            p Price: #[strong #{product.minimumPrice}]
        else
            p Price: #[strong #{product.minimumPrice}] to #[strong #{product.maximumPrice}]
        if (product.cashBack > 0)
            p Cash Back amount: #[strong #{product.cashBack}]
        if (product.freeShipping)
            p(class="text-emphasized-1") *Free Shipping!
        if (product.onSale)
            p(class="text-emphasized-2") Discounted Item

這是渲染視圖的路由文件的摘錄，其中觸發了if (err)分支：

           res.render(
                'ajax-product-details',
                locals,
                function (err, html) {
                    if (err)
                    // A rendering error occurred.
                        throw new Error("Rendering error(type:" + err.type + ", message: " + err.message);
                    else {
                        // Success. Send back the rendered HTML.
                        res.send(html);
                        return;
                    }
                });

這是我在WebStorm調試器控制台窗口窗格中看到的錯誤。 請注意，盡管在Jade文件引用中可以清楚地看到前面的“ ..”相對目錄引用，但文件顯示為/common_routines.js， 而沒有前面的“ ..”相對目錄引用("script(src="../common_routines.js")):

[Express][127.0.0.1][GET][DESKTOP] 2016-07-20T10:07:34.940Z /common_routines.js?_=1469009245957
(development error handler) Status code(404) message: Not Found

這是common_routines.js的內容：

function truncateString(str, maxLen)
{
    if (str.length > maxLen)
        return str.substring(0, maxLen - 1) + '&hellip';
    return str;
}

module.exports =
{
    truncateString: truncateString
}

就像我說的那樣， common_routines.js位於Jade視圖上方的目錄中，因此出於某種原因，此外部文件引用無效嗎？：

script(src="../common_routines.js")

Answer 1

您只能在前端引用public文件夾中的靜態文件（如果已將靜態資產設置為從該文件夾提供）。 您可以將common_routines.js文件放在public內部的文件夾中，例如public/js/ 。 現在，您可以使用script(src="/js/common_routines.js")在您的視圖文件中引用它

如果您想在jade文件中而不是在前端js文件中使用這些功能，則需要使用var commonRoutines = require('../common_routines.js');將該功能作為一個包包含在內var commonRoutines = require('../common_routines.js'); 在服務器端js文件中。 現在，您可以將此對象變量與上下文對象一起傳遞到視圖文件。 如前所述，在渲染時將locals對象傳遞給視圖文件，您可以像這樣進行操作：

var common_routines = require('../common_routines.js');
var locals = { common_routines: common_routines };
res.render( 'ajax-product-details', locals);

現在，您可以在ajax-product-details文件中使用common_routines.js中的函數。