2017-01-19 47 views
0

这是我的目录结构:快递不会自动服务的index.html静态文件

build/ (contains gulp tasks for generating dist from src) 
dist/ (this is the static app I'm serving) 
    (all other assets, css, images, etc) 
    index-5c1755df65.html 
src/ (source files, can't be served through express) 
express/ (express app + API) 
    app.js 

这里是我的快递app.js

//Enable Helmet security fixes - dnsPrefetchControl, clickjacking prevention, poweredBy hide, HSTS, ieNoOpen, MIME type sniffing and XSS prevention 
app.use(helmet()); 

//Parse the body of the request as a JSON object, part of the middleware stack (https://www.npmjs.com/package/body-parser#bodyparserjsonoptions) 
app.use(bodyParser.json()); 

//Serve static Angular JS assets from distribution, part of the middleware stack, but only through HTTPS 
//--------The following line used to work!--------- 
app.use('/', ensureSecure, express.static('dist'); 

//Import routes (Removed getToken router. BH Token is processed through a helper) 
app.use('/api', [router_invokeBhApi]); 
//404 Redirect on unhandled url 
app.use('*', function (req, res, next) { 
    res.status(404).sendFile(__dirname + '/views/404.html'); 
}); 

//Setup port for access 
app.listen(process.env.PORT || 3000, function() { 
    console.log(`The server is running on port ${process.env.PORT || 3000}!`); 
}); 

我曾经服务于整个dist(这是一个角度1.4.3应用程序)与上面的代码中的那一行,它用于提供索引文件,即使它的名称中有一个随机密码。

经过一些更新,它只是停止工作。现在,我不得不从npm做到这一点,利用所谓的serve-static外部库:

app.use('/', ensureSecure, serveStatic('dist', {'index': ['index-5c1755df65.html', 'index.html']})); 

不知道如何解决这个问题,或者是什么原因造成这突如其来的变化。它是浏览器吗?或角? (从1.4.3升级到1.5.8与我的最新变化)

编辑:我的HTML文件

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <!--REMOVED ALL THE META TAGS FOR STACK OF PURPOSES--> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
     <title>IMG Career Portal</title> 
     <!-- default font --> 
     <!--<link href='//fonts.googleapis.com/css?family=Roboto:400,700,500' rel='stylesheet' type='text/css'>--> 
     <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> 
     <!-- Font Awesome --> 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'> 
     <link rel="stylesheet" href="styles/vendor-f398fee98b.css"> 

     <link rel="stylesheet" href="styles/app-292a67e7f9.css"> 
    </head> 
    <body> 

     <!-- Main Application Tag (Angular2 Ready :)) --> 
     <main></main> 



     <script src="scripts/vendor-ec12e9202e.js"></script> 

     <script src="scripts/app-8e0fb1a5c9.js"></script> 
    </body> 
</html> 

我跑gulp express清洁,构建和运行应用程序:

gulp.task('express', ['clean','build'], function(){ 
    nodemon({ 
     script: 'express/app.js' 
    }); 
}); 
+0

请添加您的'.html'文件 –

+0

噢,对不起,我说现在@SayuriMizuguchi – ykadaru

回答

0

这是因为应用程序。 js需要在头标签内工作。

如果你想关注API的index.html文件inicializate:

app.get('/', function(req, res){ 
    res.render("../yourpaste/index"); //the new index.ejs file 
     }); 

添加在您的app.js

module.exports = app; 

尽量把你的app.js head标签内。

<!doctype html> 
<html lang="en"> 
    <head> 
     <script src="scripts/app-8e0fb1a5c9.js"></script> //your app.js 
     <meta charset="utf-8"> 
     <meta name="description" content="Official career portal of the Ian Martin Group, an Engineering & IT recruiting B Corporation."> 
     <meta property="og:title" content="Ian Martin Group: Careers"> 
     <meta property="og:description" content="Find the next great step in your Engineering or IT career here."> 
     <meta property="og:image" content="https://media.glassdoor.com/o/de/b1/5f/51/the-ian-martin-group-all-company-retreat-2015.jpg"> 
     <meta property="og:url" content="https://careers.ianmartin.com"> 
     <meta name="twitter:title" content="Ian Martin Group: Careers"> 
     <meta name="twitter:description" content="Find the next great step in your Engineering or IT career here."> 
     <meta name="twitter:image" content="https://media.glassdoor.com/o/de/b1/5f/51/the-ian-martin-group-all-company-retreat-2015.jpg"> 
     <meta name="twitter:card" content="summary_large_image"> 
     <meta property="og:site_name" content="IMG Careers"> 
     <meta name="twitter:image:alt" content="Great company culture."> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
     <title>IMG Career Portal</title> 
     <!-- default font --> 
     <!--<link href='//fonts.googleapis.com/css?family=Roboto:400,700,500' rel='stylesheet' type='text/css'>--> 
     <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> 
     <!-- Font Awesome --> 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'> 
     <link rel="stylesheet" href="styles/vendor-f398fee98b.css"> 

     <link rel="stylesheet" href="styles/app-292a67e7f9.css"> 
    </head> 
    <body> 

     <!-- Main Application Tag (Angular2 Ready :)) --> 
     <main></main> 



     <script src="scripts/vendor-ec12e9202e.js"></script> 


    </body> 
</html> 
+0

但如何将app.js从HTML内(表达)的运行,如果它不能检测到首页 - (随机字符串).html文件第一? – ykadaru

+0

如果您不通知格式,他们会自动获取您的.html文件的名称。但是,如果是“ejs”,你就设置了...例如:'app.set('view engine','ejs');'如果你不设置,他们会得到html文件 –