个人中心
gpt4 book ai didi

node.js - Angular 2 Webpack 生产构建和 Node : can't get direct URLs to serve

转载 作者：搜寻专家 更新时间：2023-11-01 00:39:25 25 4
gpt4 key购买 nike

我按照说明从 angular.io 站点创建了一个 webpack 构建环境:https://angular.io/docs/ts/latest/guide/webpack.html ，并开始工作。然后，我将开始工作的英雄之旅教程迁移到 webpack 环境中。

如果我使用 webpack 开发环境(使用 npm start)运行英雄之旅，效果会很好。如果我随后创建一个生产构建(使用 npm run build)，并使用 Node 提供生成的文件，当我尝试直接访问 URL 时，我无法让服务器响应。下面我将逐步概述创建环境和问题的步骤。我相信解决方案是修改我的 server.js 文件，但我不知道需要什么。

如何重新创建:

  1. 按照网站上的说明(上面的链接)创建 webpack 构建环境。
  2. 将英雄环游liteserver环境中的app文件夹复制到webpack环境的src文件夹中

  3. 在 webpack 环境的 index.html 中，注释掉(或移除)所有用于 polyfills 和 Configure SystemJS 的脚本。 Index.html 应如下所示:

    <html>
      <head>
        <base href="/">
        <title>Angular 2 QuickStart</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--
        <link rel="stylesheet" href="styles.css">
        <script src="node_modules/core-js/client/shim.min.js"></script>
        <script src="node_modules/zone.js/dist/zone.js"></script>
        <script src="node_modules/reflect-metadata/Reflect.js"></script>
        <script src="node_modules/systemjs/dist/system.src.js"></script>
        <script src="systemjs.config.js"></script>
        <script>
          System.import('app').catch(function(err){ console.error(err); });
        </script>
        -->
      </head>
      <!-- 3. Display the application -->
      <body>
        <my-app>Loading...</my-app>
      </body>
    </html>

  4. 修改 package.json，使其具有两种环境所需的内容。我的看起来像这样:

    {
      "name": "angular2-webpack",
      "version": "1.0.0",
      "description": "A webpack starter for Angular",
      "scripts": {
        "start": "webpack-dev-server --inline --progress --port 8080",
        "test": "karma start",
        "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
      },
      "licenses": [
        {
          "type": "MIT",
          "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
        }
      ],
      "dependencies": {
        "@angular/common": "~2.1.1",
        "@angular/compiler": "~2.1.1",
        "@angular/core": "~2.1.1",
        "@angular/forms": "~2.1.1",
        "@angular/http": "~2.1.1",
        "@angular/platform-browser": "~2.1.1",
        "@angular/platform-browser-dynamic": "~2.1.1",
        "@angular/router": "~3.1.1",
        "angular2-cool-storage": "^1.1.0",
        "angular2-in-memory-web-api": "0.0.20",
        "bootstrap": "^3.3.6",
        "core-js": "^2.4.1",
        "reflect-metadata": "^0.1.3",
        "rxjs": "5.0.0-beta.12",
        "zone.js": "^0.6.25"
      },
      "devDependencies": {
        "@types/core-js": "^0.9.34",
        "@types/node": "^6.0.45",
        "@types/jasmine": "^2.5.35",
        "angular2-template-loader": "^0.4.0",
        "awesome-typescript-loader": "^2.2.4",
        "css-loader": "^0.23.1",
        "extract-text-webpack-plugin": "^1.0.1",
        "file-loader": "^0.8.5",
        "html-loader": "^0.4.3",
        "html-webpack-plugin": "^2.15.0",
        "jasmine-core": "^2.4.1",
        "karma": "^1.2.0",
        "karma-jasmine": "^1.0.2",
        "karma-phantomjs-launcher": "^1.0.2",
        "karma-sourcemap-loader": "^0.3.7",
        "karma-webpack": "^1.8.0",
        "null-loader": "^0.1.1",
        "phantomjs-prebuilt": "^2.1.7",
        "raw-loader": "^0.5.1",
        "rimraf": "^2.5.2",
        "style-loader": "^0.13.1",
        "typescript": "^2.0.3",
        "webpack": "^1.13.0",
        "webpack-dev-server": "^1.14.1",
        "webpack-merge": "^0.14.0"
      }
    }

  5. 从 webpack 文件夹中，运行 npm install

  6. 从 webpack 文件夹中，运行 npm run build 以创建产品构建文件。这就是 webpack 教程所说的。
  7. 创建 Node 服务器环境。

  8. 在根目录下创建一个 server.js 文件，如下所示:

    var express = require("express");

    var app = express();

    app.use(function(req, res, next) {
        console.log("Request recieved for:", req.url);
        next();
    });

    app.use(express.static('public'));

    app.use(function(req, res, next) {
        res.status(404);
        res.send('404 file not found');
    });

    app.listen(4040, function() {
        console.log("yes: 4040");
    });

  9. 在node环境中，创建一个public文件夹，将第6步创建的dist文件夹中的所有文件放入public文件夹中。

  10. 使用node server.js运行 Node 服务器
  11. 转到本地主机:4040。以这种方式访问​​时一切正常。
  12. 直接输入这个 URL:http://localhost:4040/heroes
  13. 获取 404 错误。
  14. 如果您在 webpack 环境中运行 npm start，您可以直接访问 URL http://localhost:4040/heroes，它工作正常。<

如果您想查看所有代码，这里是 github 存储库:https://github.com/joshuaforman/heroeswebpack

最佳答案

我已经弄明白了。问题出在 server.js 中。经过更多研究，我发现了这个:https://expressjs.com/en/starter/static-files.html .需要在express.static中间件之后添加更多的中间件:app.use('/heroes', express.static('public'));。直接 URL 根据需要与此 server.js 文件一起工作:

var express = require("express");

var app = express();

app.use(function(req, res, next) {
    console.log("Request recieved for:", req.url);
    next();
});

app.use(express.static('public'));
app.use('/heroes', express.static('public'));
app.use('/dashboard', express.static('public'));

app.use(function(req, res, next) {
    res.status(404);
    res.send('404 file not found');
});

app.listen(4040, function() {
    console.log("yes: 4040");
});

我正在开发的应用程序也需要传递参数，因此如果您需要这样做，您将需要这种格式的中间件:

app.get('/peopledetails/:uid', function(req, res){
    var uid = req.params.uid,
        path = req.params[0] ? req.params[0] : 'index.html';
    res.sendFile(path, {root: './public'});
});

感谢上面的堆栈问题:Serve Static Files on a Dynamic Route using Express .

谢谢大家的帮助。

关于node.js - Angular 2 Webpack 生产构建和 Node : can't get direct URLs to serve，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40346888/

25 4 0
文章推荐： swift 4 : nil loading local UIImage
文章推荐： ios - 如何使用 AVCapturePhoto 包含位置数据？
文章推荐： 子类型的 Swift 协议(protocol)一致性要求
文章推荐： php - 将自定义批量操作添加到 Woocommerce 3 中的管理员订单列表
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com