HTML无法找到我的js文件

时间:2017-10-15 18:16:10

标签: javascript html angularjs

我有一个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

1 个答案:

答案 0 :(得分:0)

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

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