时间戳

首页 > 解决方案 > 在 Heroku 上使用 Express 时出现 Slick Slider 错误

javascript - 在 Heroku 上使用 Express 时出现 Slick Slider 错误

问题描述

我在使用 Slick Slider 并在不同情况下遇到不同类型的错误时遇到了一些问题。

一切都按我的意愿工作，但仅限于本地，我正试图用$ git push heroku master命令将它推到 Heroku 上。

我创建了一个文件夹，然后运行以下命令

 1. npm init
 2. git init
 3. npm i -S express ejs

文件夹包含：

- index.html
- app.js
- package.json
- package-lock.json
- views 
  -- index.ejs
- public 
  -- css
    --- slick.css 
    --- styles.css
  -- js 
    --- slick.min.js           
  -- images 
    --- (full of images)

这是我在 ejs 模板中的头

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bg design</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet"href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
    <link rel="stylesheet" href="/css/slick.css">
    <link rel="stylesheet" href="/css/styles.css">
  </head>

这是身体的尽头

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="/js/slick.min.js"></script>
    <script>
      $(document).ready(function(){
      $('.multiple-items').slick({
          prevArrow: '.arrow_prev',
          nextArrow: '.arrow_next',
          slidesToShow: 3,
          autoplay: true,
          arrows: true,
          autoplaySpeed: 5000,
          centerMode: true,
          speed: 500,
          swipeToSlide: true,
          cssEase: 'linear',
          responsive: [
              {
                breakpoint: 600,
                settings: {
                  slidesToShow: 2,
                  centerMode: true,
                  centerPadding: '40px',
                  prevArrow: 'false',
                  nextArrow: 'false',
                  slidesToScroll: 2
                }
              },
              {
                breakpoint: 480,
                settings: {
                  slidesToShow: 1,
                  centerMode: true,
                  prevArrow: 'false',
                  nextArrow: 'false',
                  centerPadding: '40px',
                  slidesToScroll: 1
                }
              }
              // You can unslick at a given breakpoint now by adding:
              // settings: "unslick"
              // instead of a settings object
            ]
      });
  });
    </script>
    <script type="text/javascript" src="app.js"></script>
    <!-- Index HTML -->
  </body>
</html>

这是 app.js

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

app.set('view engine', 'ejs');
app.use(express.static(__dirname + "/public"));

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

app.listen(3000, () => {
  console.log("Server on!")
});

包.json

{
  "name": "barbora_alpha",
  "version": "1.0.0",
  "description": "Barbora's website",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    //This line  "start": "node app.js" is here because of heroku. I have it from Colt Steel's course.without it heroku throws error.
    "start": "node app.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ejs": "^3.1.3",
    "express": "^4.17.1"
  }
}

我通过在我的 Visual Studio 中单击鼠标右键在本地进行了尝试index.ejs，一切看起来都很好。

但是，如果我打开开发者控制台，我会看到：

“加载资源失败：服务器响应状态为 404（未找到）app.js:1”

然后我用：

 git add .
 git commit -m "First commit"
 heroku create ( I'm alread logged in to heroku and already pushed 5-6 apps with no problems like this)
 git push heroku master

我得到了参考错误：$ is not defined; 在我检查了我的 Heroku 日志后，我发现了 H81 Heroku 错误。

当我不使用 jQuery 时，其他所有应用程序都运行良好。

我将不胜感激任何帮助。我尝试了一切，我被困在第 5 天，在互联网上寻找答案，我不知道该怎么做。

我尝试了不同的文件路径。

不同的选项：

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

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

一个或另一个或两者兼而有之。

如果我执行“/”，我会丢失所有静态文件图像、css、Slick Slider 插件功能。

如果我执行“/public”，我会得到：

Failed to load resource: the server responded with a status of 404 (Not Found) app.js:1

结论：我想像以前的任何其他应用程序一样将其推送到 Heroku，但由于$未定义 jQuery，因此遇到了问题。虽然使用与其他应用程序相同的方法。

感谢您的任何帮助。

标签： javascriptjquerynode.jsexpressslick.js

解决方案

推荐阅读