目录

 写在前面

 EJS 模板语法

1、纯脚本标签

2、输出经过 HTML 转义的内容

3、输出非转义的内容

4、引入其他模版

5、条件判断

6、循环

7、注释

 参考资料

 写在前面

在 vue 或者 react 前端项目中，我们经常会在入口模板文件 index.html 中看到用 %PUBLIC_URL%、<%= BASE_URL %>、<%= title %> 之类的变量插入。但这似乎我们平时的 html 或者 javscript 压根没见过这类的写法，一时感觉超出了自己的知识盲区。

◼️ %PUBLIC_URL%

%PUBLIC_URL% 代表项目 public 静态资源文件夹的绝对路径，vite3 中 index.html 中的 URL 将被自动转换，因此不再需要 %PUBLIC_URL% 占位符了，开始 | Vite 官方中文文档

一般用来设置网站的图标、logo或者全局css、js引用这些，如：

。

对应 vite 中的 publicDir 配置，默认就是 public

◼️ <%= BASE_URL %>

项目根目录

要修改这个值，vue + webpack项目中 Vue CLI 3.3 之前的版本，配置：baseURl: '/static'；Vue CLI 3.3 之后（包括3.3）的版本，配置：publicPath: '/static'。

这个值在开发环境下同样生效，这么改打包后是没问题了，但项目本地运行会报错，官方也给出了方案，只需要判断一下当前环境是生产环境还是开发环境，再设置不同的路径就可以了：

module.exports = {

publicPath: process.env.NODE_ENV === 'production'

? '/static/'

: '/'

}

 EJS 模板语法

EJS -- 嵌入式 JavaScript 模板引擎 | EJS 中文文档

EJS -- Embedded JavaScript templates

EJS 是什么？简单了解一下，我们来看看官方对EJS的定义：

What is the "E" for? "Embedded?" Could be. How about "Effective," "Elegant," or just "Easy"? EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. No religiousness about how to organize things. No reinvention of iteration and control-flow. It's just plain JavaScript.  “E” 代表什么？可以表示 “可嵌入（Embedded）”，也可以是“高效（Effective）”、“优雅（Elegant）”或者是“简单（Easy）”。EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。 

像我们在 html 代码中见到的 <%%>、<%=%>、<%:%> 这类语法，其实是 ejs模版语法，EJS 可以将数据和模板合并然后生成 HTML 文本。也就是帮我们用 JavaScript 代码来生成 HTML 页面。

那我们看下它怎么渲染 HTML：

const ejs = require('ejs'),

let people = ['geddy', 'neil', 'alex']

const html = ejs.render('<%= people.join(", "); %>', {people: people});

是不是和 ReactDOM 的 render 很像？

ReactDOM.render(

Hello, Mum

, document.getElementById('root'));

用模版语言渲染页面的方法都大同小异，而且一般也不会单独用ejs，像vue-cli这些框架都帮我们集成好了。所以这个部分不用太过关注，更不用去精读它的教程。在现代项目里，我们一般只需要用到它的模版语法。

ejs的四种语法：

1、纯脚本标签

<% code %>

里面可以直接写 js 代码，用于书写流程控制语句，不输出任何内容。

<%

for (var i = 0; i < 10; i++) {

alert('hello world')

}

%>

又如

<% alert('hello world') %> // 会执行弹框

2、输出经过 HTML 转义的内容

<%= xxx %>

将数据输出到模板，如果输出的数据是HTML，则会被转义，如 '<'、'>'、'&' 等 html 字符，会被转义成字符实体：“< > &”

<%= value %> 可以是变量，<%= a ? b : c %> 也可以是表达式，<%= a + b %>

即变量如果包含 '<'、'>'、'&'等HTML字符，会被转义成字符实体，像< > &

因此，用<%=，最好保证里面内容不要有HTML字符

const text = '

你好你好

'

<%= text %>

// 输出 <p>你好你好</p> 插入

标签中

3、输出非转义的内容

<%- 富文本数据 %>

和上一个类似，不过不会被转义，通常用来输出富文本内容，即 HTML内容

上面说到<%=会转义HTML字符，那如果我们就是想输出一段HTML怎么办呢？那么我们局可以使用<%-它不会解析HTML标签，也不会将字符转义后输出。像下面的例子，就会直接把

我来啦

插入

标签中

const html = '

我是烤地瓜

'

<%- html %>

4、引入其他模版

<%- include('文件路径') %>

将相对于模板路径中的模板片段包含进来。用<%- include指令而不是<% include，为的是避免对输出的 HTML 代码做转义处理。

// 当前模版路径：./views/tmp.ejs

// 引入模版路径：./views/user/show.ejs

<% users.forEach(function(user){ %>

<%- include('user/show', {user: user}); %>

<% }); %>

5、条件判断

<% if (condition1) { %>

...

<% } %>

<% if (condition1) { %>

...

<% } else if (condition2) { %>

...

<% } %>

// 举例

<% if (a && b) { %>

可以直接放 html 内容

<% } %>

<% if (a && b) { %>

<% console.log('也可以嵌套任意ejs模版语句') %>

<% } %>

比如，vue-cli在index.html判断环境变量加载不同代码

在vue-cli生成的项目中，index.html下是无法直接获取到环境变量的，但是可以使用webpack提供的特殊语法获取的服务中的变量 <% %>

<% if (process.env.NODE_ENV === 'production' ) { %>

<% } else {%>

<% } %>

We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.

​

6、循环

<% for(var i = 0; i < arr.length; i++){ %>

<%= i %> <%= arr[i] %>

<% } %>

<% for(var i in jsArr) { %>

<% } %>

// 推荐

<% for(var css of cssArr) { %>

<% } %>

7、注释

<%# xxx %>

EJS模板提供的注释方式，不会被作为模板内容编译输出

 参考资料

EJS -- 嵌入式 JavaScript 模板引擎 | EJS 中文文档

EJS -- Embedded JavaScript templates

推荐阅读