【发布时间】: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