跳转到主文档

静态 Web 服务器托管网站

大多数情况下，直接在服务器中使用 start 命令启动已经构建完的 Modern.js 应用即可。

有时，开发者希望使用自己已有的服务器，或者直接使用 CDN 来托管 Modern.js 应用的产物。默认情况下，构建产物不支持直接在这类静态 Web 服务器中使用。

Modern.js 为这类场景提供了独立的插件来支持。

注

使用静态 Web 服务器会导致原有的 Modern.js 功能的损失，例如 SSR、SSG，自动的 MAP/SPA 路由等。

启用功能​

在项目目录中执行 pnpm new 启用部署功能，在是否调整 Web 服务器一问中选择【是】：

? 请选择你想要的操作：启用可选功能
? 启用可选功能：启用「部署」功能
? 默认使用框架自带的专业 Web 服务器，是否调整：是
? 请选择 CDN 平台：不使用 CDN

可以发现 package.json 中已经新增了以下依赖：

{
  + "@modern-js/plugin-static-hosting": "^1"
}

启用该功能后，重新执行 pnpm run build 命令，可以看到产物 dist/ 目录下，HTML 文件已经被平铺到外层，同时 main.html 也被重命名为了 index.html。

.
├── static/
│   ├── css/
│   │   ├── main.6a8baa57.css
│   │   └── main.6a8baa57.css.map
│   └── js/
│       ├── runtime-main.edcde8c9.js
│       └── runtime-main.edcde8c9.js.map
├── asset-manifest.json
├── home.html
├── index.html
└── route.json

使用 CDN 托管​

Modern.js 支持直接使用 CDN 来托管使用上述插件后的构建产物。此时需要先开启 CDN 上传。

接着需要配置额外的环境变量，将整个产物目录上传到 CDN 中。可以在 .env 文件中设置以下环境变量，修改默认上传的资源目录：

.env
CLOUD_STATIC_FILES="."
注

默认情况下，Modern.js 的 CDN 插件会上传构建产物中 static 文件夹下的内容，修改为 . 后，将会上传整个产物目录。

现在，执行 pnpm run deploy 命令后，网站就已经被托管在 CDN 上了。

默认情况下，如果没有设置 output.assetPrefix，HTML 中的静态资源将通过绝对路径访问，例如：

<script src="/static/js/*.js"></script>

在 CDN 托管方式下，如果已经为 CDN 设置了 CLOUD_BUCKET_PATH，指定了 CDN 的上传目录，则还需要将 assetPrefix 修改为相对路径，保证 HTML 中的静态资源文件能够被正常访问：

module.config.js
export default defineConfig({
  output: {
    assetPrefix: './'
  }
}

使用已有的静态 Web 服务器托管​

构建产物也可以直接被应用在任意的静态 Web 服务器中，例如云平台的静态网站托管。

这里使用最简单的方式来做演示，先在全局安装 http-server ，接着进入 dist/ 目录，执行以下命令。

http-server

控制台打印以下信息，说明 http 服务已经正常启动。

Available on:
  http://127.0.0.1:8080

访问 http://127.0.0.1:8080，可以看到页面已经正常渲染。