【问题标题】:HTML cannot locate my js filesHTML 找不到我的 js 文件
【发布时间】:2017-10-16 03:26:12
【问题描述】:

我有一个 MEAN 应用。当我尝试从 index.html 链接我的 app.min.js 文件时,控制台会给出此错误“http://localhost:8080/app.min.js net::ERR_ABORTED”

我尝试了所有类型的路径,例如添加“/”、“../”等,但都没有奏效。我认为这可能与快速静态文件路径有关,所以尝试了相同但没有运气。任何其他类似问题的线程都没有解决它。

代码如下:

server.js

const path = require('path');
const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(express.static(path.join(__dirname, '')));
app.use(express.static('\build'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.get('/', function(req, res){
    res.sendFile(path.resolve(__dirname + '/../index.html'));
});

console.log('Server running: http://localhost:8080')
app.listen(8080);

index.html

<!DOCTYPE html>
<html lang="en" ng-app="angularApp">
    <head>
        <base href="/">
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="icon" type="image/png" href="public/ico/favicon.ico"/>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src="app.min.js " type="text/javascript"></script>
    </head>
    <body>

        <ui-view></ui-view>

    </body>
</html>

package.json

{
  "name": "angular-scripts",
  "version": "1.2.3",
  "description": "Simple AngularJS Boilerplate to kick start your new project with SASS support and Gulp watch/build tasks",
  "author": "Semianchuk Vitalii",
  "license": "MIT",
  "dependencies": {
    "@uirouter/angularjs": "^1.0.0",
    "angular": "^1.6.5",
    "angular-animate": "^1.5.8",
    "angular-messages": "^1.6.6",
    "body-parser": "^1.17.2",
    "chalk": "*",
    "cross-spawn": "*",
    "express": "^4.15.4",
    "fs-extra": "*",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-csso": "^2.0.0",
    "gulp-plumber": "^1.1.0",
    "gulp-sass": "^2.3.2",
    "gulp-uglify": "^2.1.2",
    "mongodb": "^2.2.33",
    "mongojs": "^2.4.1",
    "mongoose": "^4.10.8",
    "path": "*",
    "path-exists": "*"
  }
}

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var csso = require('gulp-csso');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');

gulp.task('sass', function() {
    gulp.src([
        'public/**/*.scss',
        'src/modules/**/*.scss'
    ])
        .pipe(concat('style.js'))
        .pipe(plumber())
        .pipe(sass())
        .pipe(gulp.dest('build'));
});

gulp.task('compress-dev', function() {
    gulp.src([
        'node_modules/angular/angular.js',
        'node_modules/angular-ui-router/release/angular-ui-router.js',
        'node_modules/angular-animate/angular-animate.js',
        'https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.5.8/angular-messages.js',
        'app.js',
        'src/**/*.js',
    ])
        .pipe(concat('app.min.js'))
        .pipe(gulp.dest('build'));
});

gulp.task('compress-prod', function() {
    gulp.src([
        'node_modules/angular/angular.js',
        'node_modules/angular-ui-router/release/angular-ui-router.js',
        'node_modules/angular-animate/angular-animate.js',
        'app.js',
        'src/**/*.js',
    ])
        .pipe(concat('app.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('build'));
});

gulp.task('watch', function() {
    gulp.watch('public/styles/*.scss', ['sass']);
    gulp.watch('src/modules/**/*.scss', ['sass']);
    gulp.watch('src/**/*.js', ['compress-dev']);
    gulp.watch('app.js', ['compress-dev']);
});

gulp.task('dev',  ['sass', 'compress-dev', 'scripts', 'watch']);
gulp.task('build', ['sass', 'compress-prod']);

这是我的项目结构: enter image description here

【问题讨论】:

  • app.min.js 是否位于 build 中?它被创建了吗
  • 你试过了吗
  • 是的,我也试过这条路。请参阅我的项目结构的附加屏幕截图。 app.min.js 文件在那里。当我尝试链接任何 js 文件时,它实际上会发生。
  • 你是如何获得 app.min.js ... webpack 、 gulp 或现成的?你能分享一下package.json吗
  • 它是用 gulp 构建的,但它不仅仅是它找不到的 app.min.js 文件,它是我与脚本标签链接的任何 js 文件。用 package.json 更新

标签: javascript html angularjs


【解决方案1】:

将一些脚本添加到 package.json ..它将创建所需的脚本

 "scripts": {
    "prestart" : "gulp",
    "start": "node server.js",
    "build": "gulp build",
    "server": "gulp server",
    "serverbuild": "gulp server-build"
}

【讨论】:

  • 试过了,但没有任何区别。即使我把 gulp 全部拿出来,它仍然找不到我从索引文件链接的任何 js 文件。
  • gulpfile.js 请表明......我想看看文件被创建到什么目的地......这样我就可以
  • ahaaa 没有 default 任务...到 gulpfile.js 添加 gulp.task('default', ['sass', 'compress-dev ', 'scripts', 'watch']); 然后再试一次
  • 恐怕还是没用。我对 gulp 比较陌生,但我的理解是,如果您直接从 index.html 文件引用 js 和 css,则不必使用它。它只是一个帮助自动化缩小和其他任务的工具。主要问题是当我尝试从我的 index.html 文件链接 .js 或 .css 文件时,它会给出该错误。即使它完全删除 gulp 并忽略 min.js 文件。
  • 我恢复到较早的提交并且它再次工作。我试图弄清楚有什么不同,但看不到。无论如何感谢您的帮助。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-05-31
  • 1970-01-01
  • 1970-01-01
  • 2016-01-22
  • 1970-01-01
  • 1970-01-01
  • 2021-05-31
相关资源
最近更新 更多