如何让 npm lite 服务器提供我网页的全部内容？答案

【问题标题】：How to get npm lite server serve full content of my webpage?如何让 npm lite 服务器提供我网页的全部内容？
【发布时间】：2023-03-07 03:04:01
【问题描述】：

我分别使用npm install html5-boilerplate --save-dev 和npm install lite-server --save-dev 安装了html5-boilerplate 和lite-server 模块。

我必须从node_modules 文件夹中复制index.html 才能使用npm start 提供内容。我所看到的只是<p> 标签被渲染，如图所示。

这就是我的工作目录的样子。

Directory of D:\Full_Stack_Web_Development

27-02-2019  09:58    <DIR>          .
27-02-2019  09:58    <DIR>          ..
27-02-2019  10:05             1,871 index.html
27-02-2019  09:55    <DIR>          node_modules
27-02-2019  09:55           125,319 package-lock.json
27-02-2019  09:57               739 package.json
               3 File(s)        127,929 bytes
               3 Dir(s)  213,613,010,944 bytes free

D:\Full_Stack_Web_Development>

这就是我的package.json 文件的样子。 index.html可以查看here

{
  "name": "full_stack_web_development",
  "version": "1.0.0",
  "description": "beginning front end development using html5 boilerplate",
  "main": "index.html",
  "scripts": {
    "start": "npm run lite",
    "test": "echo \"Error: no test specified\" && exit 1",
    "lite": "lite-server"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/alokananda-y/Full_Stack_Web_Development.git"
  },
  "author": "alokananda y",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/alokananda-y/Full_Stack_Web_Development/issues"
  },
  "homepage": "https://github.com/alokananda-y/Full_Stack_Web_Development#readme",
  "devDependencies": {
    "html5-boilerplate": "^7.0.1",
    "lite-server": "^2.4.0"
  }
}

【问题讨论】：

标签： npm package.json npm-scripts html5boilerplate

【解决方案1】：

H5BP 非常灵活，因此有几种方法可以做您想做的事情。你可以：

将node_modules/html5-boilerplate的全部内容复制到文件夹的根目录，而不仅仅是index.html。您所针对的基本文件夹结构就是我们在 dist 文件夹中的内容。
您可以将 index.html 中的所有链接更改为指向 node_modules/html5-boilerplate 中的 h5bp 资源，因此您可以使用 <link rel="stylesheet" href="node_modules/html5-boilerplate/css/main.css"> 而不是 <link rel="stylesheet" href="css/main.css">
最简单的其实就是下载最新的version，解压文件夹，然后在那个文件夹里面运行npm install --save-dev lite-server。这样，唯一的依赖将是 lite-server 并且 h5bp 将准备就绪。这就是我会做的。我们通过 npm 提供项目，但它并不是真正的依赖，因为它是整个站点或应用程序的起点。

【讨论】：