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

问题描述

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

我知道如何将环境变量插入df = df.drop('cs',axis=1) Out[12]: name group revenue 2 Name3 GroupB 3 1 Name2 GroupB 2 0 Name1 GroupB 1 5 Name6 GroupA 6 4 Name5 GroupA 5 3 Name4 GroupA 4 8 Name7 GroupC 9 7 Name7 GroupC 8 6 Name7 GroupC 7 文件中。但是其他html文件呢？

现在，我包括了oidc和静默刷新功能，我需要在Public文件夹中添加一些html文件，以用于来自Identity Server的回调，例如Index.html。

该文件在某些​​Silent-refresh.html元素中包含Identity Server的URL，以满足CSP措施。

此刻，当我在命中本地Identity Server和已部署的Identity Server之间进行交换时，必须将URL复制并粘贴到应用程序的所有位置。

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

有没有办法做到这一点？ 我相信会涉及某种Webpack HTML插件，但是我不知道如何以与VUE_APP文件相同的方式使用Webpack插件进行配置。

元标记如下：

Index.html

谢谢

解决方法

您应该使用pages vue.config.js中的module.exports属性，以包含与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属性上文档的引用。