umi.js的document.ejs中如何引用配置变量

最新推荐文章于 2025-04-06 09:00:00 发布

丰色木夕

最新推荐文章于 2025-04-06 09:00:00 发布

阅读量9.7k

点赞数 2

分类专栏： umi.js 文章标签： document.ejs react umijs

本文链接：https://blog.youkuaiyun.com/youlinhuanyan/article/details/105326324

版权

umi.js 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在umi.js项目中的document.ejs模板中引用.umi.js配置变量。document.ejs作为umi项目的入口，可以设置基本配置。在需要引入外部资源或设置公共DOM元素时，可以通过`<%=` 和 `umi` 对象来获取.umi.js配置文件中的变量，从而实现动态配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何在document.ejs模板中引用.umi.js配置变量

document.ejs模板可以为umi.js项目配置最为基本的配置之一，可以理解为index.html的入口。
我们知道原生的react组件，都是需要挂载到html中的指定dom元素中的。umi.js是基于react的，尽管基于umi.js来开发react项目，使代码的逻辑更清晰，模块化更透彻，可维护性更好，但是，本质还是react。

所以，我们还是能找到，且必须能找到一个react根模块显示的挂载到html的dom元素中。那么，我们可以在这个document.ejs只找到这个挂载点，如下：

  <body>
    <div id="root"></div>
  </body>

上面的有唯一的一个<div id="root">，这就是整个react的项目的根组件挂载点

进入正题

react本质还是js，任何前端项目本质还是依赖html,js,css，这些几乎没变过，所以，有时我们需要想以往的项目一样，引入一些静态资源（js、css等），或者，设置一些<head>中的共用dom元素如<meta>，那么就可以在这个doument.ejs模板中设置。

然而，有时我们希望，从别的配置文件中，引入某些变量到doument.ejs，以便开发或部署，那么在umi.js项目中如何实现呢？

在这里，umi.js提供的解决方案是，看代码如下：

<!-- document.ejs -->
<script src="<%= context.config.publicPath %>/lib/my.js"></script>

那么context.config又是从哪里来的呢，噹噹噹…，当然就是从 .umi.js来的，我们看一下：

// .umi.js
export default {
  publicPath: '/myPublic',
  base: basePath,
  hash: true,
  ignoreMomentLocale: true,
  targets: { ie: 9 },
  treeShaking: true,
  ...
}