2017-10-15 164 views
2

我有一个MEAN应用程序。当我尝试从index.html链接我的app.min.js文件时,控制台给出了这个错误“http://localhost:8080/app.min.js net :: ERR_ABORTED”HTML无法找到我的js文件

我试过所有类型的路径,例如添加“/”,“../”等等,都没有工作。我认为这可能是与表达静态文件路径,所以尝试相同,但没有运气。任何其他类似问题的线程都没有解决它。

赫雷什的代码:

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

+0

是app.min.js位于建?它是否被创建 –

+0

你试过吗?

+0

是的,我也尝试过这个路径。看到我的项目结构附件截图。 app.min.js文件在那里。它实际上发生在我尝试链接任何js文件时。 – bcooley1983

回答

0

添加一些脚本来的package.json ..它会做必要的脚本创作

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

试过,但没有区别。即使我把所有的东西都吞下去,它仍然无法找到我从索引文件链接的任何js文件。 – bcooley1983

+0

gulpfile.js请显示.....我想查看文件的创建目标是什么......以便我可以** ** –

+0

ahaaa没有*默认*任务到gulpfile.js添加** gulp.task('default',['sass','compress-dev','scripts','watch'] ); **并再试一次 –