使用 Vuejs 将环境变量插入除索引以外的 HTML 文件

Posted 2023-02-22

【中文标题】使用 Vuejs 将环境变量插入除索引以外的 HTML 文件

【英文标题】：Inserting Environment Variables into HTML files other than Index Using Vuejs

【发布时间】：2020-12-11 08:31:57

【问题描述】：

我一直在开发一个使用 Vue CLI v3 构建的项目。*

我知道如何将环境变量插入到Index.html 文件中。但是其他 html 文件呢？

现在我包含了 oidc 和静默刷新功能，我需要在 Public 文件夹中包含更多的 html 文件，以用于来自身份服务器的回调，例如Silent-refresh.html.

该文件在某些​​ meta 元素中包含 Identity Server 的 url，以满足 CSP 措施。

目前，当我在本地身份服务器和部署的身份服务器之间切换时，我必须将 URL 复制并粘贴到应用程序的所有位置。

如果我可以将它设置为环境变量，以VUE_APP 为前缀，以便在整个项目中使用，包括此类 html 文件，那就太好了。然后我只需要在一个地方改变它。

有没有办法做到这一点？ 我相信涉及到某种 webpack HTML 插件，但我不知道如何配置它以使用对 Index.html 文件执行相同操作的 Webpack 插件。

元标记如下所示：

    <meta
      http-equiv="Content-Security-Policy"
      content="frame-src <%= VUE_APP_IDPURL %>;"
    />

谢谢

【参考方案1】：

您应该使用vue.config.js module.exports 中的pages 属性来包含与index.html 不同的页面的配置。

您必须包含 index.html 文件和备用页面的配置，如下所示：

module.exports = 
  pages: 
    index: 
      // entry for the page
      entry: 'src/index/main.js',
      // the source template
      template: 'public/index.html',
      // output as dist/index.html
      filename: 'index.html',
      // when using title option,
      // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // chunks to include on this page, by default includes
      // extracted common chunks and vendor chunks.
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    ,
    silentRefresh: 
      // you may use an empty noop js file because you only want to use the html template
      entry: 'src/index/silentRefresh.js',
      template: 'public/Silent-refresh.html',
      filename: 'Silent-refresh.html',
      title: 'Alternate Page'
    
  

这是对 pages 属性上的文档的引用。

【讨论】：

我还没到。它仍在渲染 html 页面的元标记中的原始模板文本。我必须包括其他任何内容吗？对 lodash 和或 jquery 的引用？

嗯，你能把 html 页面的元标记包括进来吗？