如何使用.ejs在托管服务部署网站？本地正常线上加载失败求助

核心问题是：Netlify、Cloudflare Pages、GitHub Pages这类静态托管平台不会自动渲染EJS模板文件，它们仅托管已编译好的静态HTML/CSS/JS资源。你本地能正常运行是因为用了支持EJS解析的服务器（比如Express），但部署时直接上传EJS文件的话，平台无法将其转换为浏览器能识别的HTML，导致页面加载失败。

必须调整构建部署配置，步骤如下：

1. 添加EJS编译脚本 #

首先需要把EJS模板预编译成静态HTML文件：

• 安装EJS编译工具（比如ejs-cli）：

  npm install --save-dev ejs-cli
  

• 在项目根目录的package.json中添加构建命令：

  "scripts": {
    "build": "ejs index.ejs -o dist/index.html"
  }
  

  这个命令会把根目录的index.ejs编译到dist文件夹下生成index.html。

2. 配置托管平台的构建参数 #

针对你使用的平台，分别设置：

• Netlify/Cloudflare Pages：
  • 构建命令：npm run build
  • 输出目录：dist
• GitHub Pages：
  • 可以通过GitHub Actions自动执行npm run build，并将dist目录的内容部署到gh-pages分支；或者手动编译后上传dist文件夹的内容。

3. 验证构建结果 #

本地执行npm run build，检查dist目录是否生成了正确的index.html文件，确保所有静态资源（CSS、JS、图片）的路径在编译后的HTML中是正确的（避免相对路径错误）。

完成以上配置后重新部署，平台会先执行构建脚本生成静态HTML，再托管这些静态文件，页面就能正常加载了。

内容的提问来源于stack exchange，提问作者YUNGJOHAN