Question

这是我的目录结构：

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应用），它用于提供索引文件，即使它有一个随机密码的名称。

经过一些更新后，它才停止工作。现在我必须使用serve-static中名为npm的外部库：

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'
  });
});

Answer 1

这是因为app.js需要在head标签内工作。

如果您希望index.html文件inicializate具有重点API：

module.exports = app;

添加你的app.js

<!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>

尝试将你的app.js放在head标签内。

A1 until A40

Express不会自动提供index.html静态文件

1 个答案: