前言

由于项目某些场景需要读取一些配置文件，通过这些配置来控制页面的一些操作以及跟后端的交互等

方案

方案一页面调用接口获取配置

在浏览器打开页面时通过接口获取数据，并注入到全局中，使用时在从配置中读取，但是随着项目越来越复杂后，很多接口以及同步的操作也要依赖配置项，就导致要控制这些接口及操作要在获取配置后再触发，后续的逻辑以及耦合度越来越高

方案二通过express注入

通过express的ejs模板把配置注入到页面中，这样在页面加载时配置就已经注入到页面中，后续需要时直接读取配置，从而把配置解耦出来

最后选择用方案二来实现

实现

简单的app.js实现方式

const express = require("express");
const ejs = require("ejs");
const app = express();

const port = 3000;
ejs.delimiter = "$";
app.engine("html", ejs.renderFile);
app.set("views", "dist");
app.set("view engine", "html");
app.use(express.static("dist"));

app.get("/*", (req, res) => {
  res.render("index", {
    config: {
      apiInfo: "接口地址",
    },
  });
});

app.listen(port, (req, res) => {
  console.log("监听serverB服务");
});

由于我们run build出来的大部分都在dist目录下，所以我们使用express.static静态托管

app.use(express.static("dist"));

大部分打包出来都是.html文件，要修改.ejs模板为.html，并将默认的views目录改成dist目录

app.engine("html", ejs.renderFile);
app.set("views", "dist");
app.set("view engine", "html");

html模板

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<script>
	// 注入
    window.config = <$- JSON.stringify(config) $>
    
</script>

<body>
</body>

</html>

在html中使用了分隔符 $，所有要在app.js中设置自定义分割符`ejs.delimiter = "$ "`，启动app.js查看注入情况

发现注入没有成功报错了，自己express用得比较少，也可能比较菜的原因一直没有发现express.static还有第二个参数!

第二个参数有个index配置项，默认是index.html，大概意思是如果目录下有index.html文件的话就直接返回index.html文件了，感觉是下面这段代码没有效果

  res.render("index", {
    config: {
      apiInfo: "接口地址",
    },
  });

于是配置成这样app.use(express.static("dist", {index: false}));在启动app.js

成功注入变量，关于配置我们可以通过express中间件从某地方（配置文件、接口等）获取

总结

使用express.static时默认返回目录下的index.html页面，如果没有才会解析res.render对应的页面
如果是.html文件为模板的话需要设置app.engine("html", ejs.renderFile)和app.set("view engine", "html");
新手第一次写文章分享，当做是平时项目中遇到问题解决的一种记录，本文所以观点都是自己的理解，如果有不对之处希望大家能积极纠正

express结合ejs使用方法方法(一)

前言

方案

方案一页面调用接口获取配置

方案二通过express注入

实现

总结