vue项目在public index.html文件中添加变量方式

 更新时间:2025年08月04日 09:20:01   作者:judy-brilliant  
这篇文章主要介绍了vue项目在public index.html文件中添加变量方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

如:给data-domain-script写一个变量,配置在env文件里

1.env

VUE_APP_URL='https://baidu.com'
VUE_APP_COOKIE_LAW_SCRIPT_ID='0190c603-e047-7f1e-a103-34158eedba05'

2.vue.config.js

在module.exports里添加

chainWebpack(config) {

    config.plugin('html').tap(args => {
      // 把CookieLaw的脚本ID注入HTML模板
      args[0].cookieLawScriptId = process.env.VUE_APP_COOKIE_LAW_SCRIPT_ID;
      return args;
    })
  },
"use strict";
const path = require("path");
const defaultSettings = require("./src/settings.js");

function resolve(dir) {
  return path.join(__dirname, dir);
}

const name = defaultSettings.title || "vue Admin Template"; // page title

module.exports = {
  publicPath: "/",
  outputDir: "dist",
  assetsDir: "static",
  lintOnSave: process.env.NODE_ENV === "development",
  productionSourceMap: false,
 
  chainWebpack(config) {

    config.plugin('html').tap(args => {
      // 把CookieLaw的脚本ID注入HTML模板
      args[0].cookieLawScriptId = process.env.VUE_APP_COOKIE_LAW_SCRIPT_ID;
      return args;
    })
  },
  
};

3.public里index.html文件里添加

 data-domain-script="<%= htmlWebpackPlugin.options.cookieLawScriptId %>"
  <script
      src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js"
      data-document-language="true"
      type="text/javascript"
      charset="UTF-8"
      data-domain-script="<%= htmlWebpackPlugin.options.cookieLawScriptId %>"
    ></script>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue v-html指令详细解析与代码实例(最新推荐)

    Vue v-html指令详细解析与代码实例(最新推荐)

    v-html是Vue.js框架中的一个指令,用于将数据中的HTML代码动态渲染到页面上,它主要用于渲染一些静态的HTML内容或者从后台获取的富文本数据,下面介绍Vue v-html详细解析与代码实例,感兴趣的朋友一起看看吧
    2024-12-12
  • vue中使用iframe嵌入网页,页面可自适应问题

    vue中使用iframe嵌入网页,页面可自适应问题

    这篇文章主要介绍了vue中使用iframe嵌入网页,页面可自适应问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue组合式API浅显入门示例详解

    vue组合式API浅显入门示例详解

    这篇文章主要为大家介绍了vue组合式API浅显入门示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • Vant的Tabbar标签栏引入自定义图标方式

    Vant的Tabbar标签栏引入自定义图标方式

    这篇文章主要介绍了Vant的Tabbar标签栏引入自定义图标方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 轻松理解vue的双向数据绑定问题

    轻松理解vue的双向数据绑定问题

    Vue是当前很火的一款MVVM的轻量级框架,它是以数据驱动和组件化的思想构建的。因为它提供了简洁易于理解的api,使得我们很容易上手。这篇文章给大家介绍了vue双向数据绑定问题,感兴趣的朋友一起看看吧
    2017-10-10
  • vuex如何修改状态state的方法

    vuex如何修改状态state的方法

    这篇文章主要介绍了vuex如何修改状态state的方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue项目中一定会用到的性能优化技巧

    vue项目中一定会用到的性能优化技巧

    这篇文章主要为大家介绍了vue项目中一定会用到的性能优化技巧实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue中4个自定义指令讲解及实例用法

    vue中4个自定义指令讲解及实例用法

    在本篇文章里小编给大家整理了一篇关于vue中4个自定义指令讲解及实例用法,有兴趣的朋友们可以跟着学习下。
    2021-12-12
  • Vue3中使用vuex4的实现示例

    Vue3中使用vuex4的实现示例

    本文主要介绍了Vue3中使用vuex4的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • VuePress 静态网站生成方法步骤

    VuePress 静态网站生成方法步骤

    这篇文章主要介绍了VuePress 静态网站生成方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02

最新评论