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-cli快速搭建项目的完整步骤

    基于Vue-cli快速搭建项目的完整步骤

    这篇文章主要给大家介绍了关于如何基于Vue-cli快速搭建项目的完整步骤,文中通过示例代码以及图片将搭建的步骤一步步介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • 在vue中使用Echarts利用watch做动态数据渲染操作

    在vue中使用Echarts利用watch做动态数据渲染操作

    这篇文章主要介绍了在vue中使用Echarts利用watch做动态数据渲染操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue-ajax小封装实例

    vue-ajax小封装实例

    下面小编就为大家带来一篇vue-ajax小封装实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 监听element-ui table滚动事件的方法

    监听element-ui table滚动事件的方法

    这篇文章主要介绍了监听element-ui table滚动事件的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • 使用webstorm配置vue+element开发环境

    使用webstorm配置vue+element开发环境

    这篇文章主要介绍了使用webstorm配置vue+element开发环境,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue滑动吸顶及锚点定位的示例代码

    vue滑动吸顶及锚点定位的示例代码

    这篇文章主要介绍了vue滑动吸顶及锚点定位的示例代码,代码简单易懂,非常不错对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • 解决vue-router进行build无法正常显示路由页面的问题

    解决vue-router进行build无法正常显示路由页面的问题

    下面小编就为大家分享一篇解决vue-router进行build无法正常显示路由页面的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue3中el-table表格数据不显示的原因和解决方法

    Vue3中el-table表格数据不显示的原因和解决方法

    这篇文章主要给大家介绍了Vue3中el-table表格数据不显示的原因和解决方法,文中有详细的代码示例供大家参考,如果有遇到相同问题的朋友可以参考阅读本文,希望能够帮到您
    2023-11-11
  • 手写实现Vue计算属性

    手写实现Vue计算属性

    这篇文章主要介绍了手写实现Vue计算属性,本文从一个简单的计算属性例子开始,一步步实现了计算属性。并且针对这个例子,详细分析了页面渲染时的整个代码执行逻辑,需要的小伙伴可以参考一下
    2022-08-08
  • VUE元素的隐藏和显示(v-show指令)

    VUE元素的隐藏和显示(v-show指令)

    本篇文章主要介绍了VUE元素的隐藏和显示(v-show指令),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06

最新评论