快捷導(dǎo)航

vue項(xiàng)目在public index.html文件中添加變量方式

更新時(shí)間：2025年08月04日 09:20:01 作者：judy-brilliant

這篇文章主要介紹了vue項(xiàng)目在public index.html文件中添加變量方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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>

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue v-html指令詳細(xì)解析與代碼實(shí)例(最新推薦)
v-html是Vue.js框架中的一個(gè)指令,用于將數(shù)據(jù)中的HTML代碼動(dòng)態(tài)渲染到頁(yè)面上,它主要用于渲染一些靜態(tài)的HTML內(nèi)容或者從后臺(tái)獲取的富文本數(shù)據(jù),下面介紹Vue v-html詳細(xì)解析與代碼實(shí)例,感興趣的朋友一起看看吧
2024-12-12
vue中使用iframe嵌入網(wǎng)頁(yè),頁(yè)面可自適應(yīng)問(wèn)題
這篇文章主要介紹了vue中使用iframe嵌入網(wǎng)頁(yè),頁(yè)面可自適應(yīng)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue組合式API淺顯入門示例詳解
這篇文章主要為大家介紹了vue組合式API淺顯入門示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
Vant的Tabbar標(biāo)簽欄引入自定義圖標(biāo)方式
這篇文章主要介紹了Vant的Tabbar標(biāo)簽欄引入自定義圖標(biāo)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
輕松理解vue的雙向數(shù)據(jù)綁定問(wèn)題
Vue是當(dāng)前很火的一款MVVM的輕量級(jí)框架，它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。因?yàn)樗峁┝撕?jiǎn)潔易于理解的api，使得我們很容易上手。這篇文章給大家介紹了vue雙向數(shù)據(jù)綁定問(wèn)題，感興趣的朋友一起看看吧
2017-10-10
vuex如何修改狀態(tài)state的方法
這篇文章主要介紹了vuex如何修改狀態(tài)state的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
vue項(xiàng)目中一定會(huì)用到的性能優(yōu)化技巧
這篇文章主要為大家介紹了vue項(xiàng)目中一定會(huì)用到的性能優(yōu)化技巧實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
vue中4個(gè)自定義指令講解及實(shí)例用法
在本篇文章里小編給大家整理了一篇關(guān)于vue中4個(gè)自定義指令講解及實(shí)例用法，有興趣的朋友們可以跟著學(xué)習(xí)下。
2021-12-12
Vue3中使用vuex4的實(shí)現(xiàn)示例
本文主要介紹了Vue3中使用vuex4的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
VuePress 靜態(tài)網(wǎng)站生成方法步驟
這篇文章主要介紹了VuePress 靜態(tài)網(wǎng)站生成方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-02-02