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快速搭建項目的完整步驟，文中通過示例代碼以及圖片將搭建的步驟一步步介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-11-11
在vue中使用Echarts利用watch做動態(tài)數(shù)據(jù)渲染操作
這篇文章主要介紹了在vue中使用Echarts利用watch做動態(tài)數(shù)據(jù)渲染操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
下面小編就為大家?guī)硪黄獀ue-ajax小封裝實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
監(jiān)聽element-ui table滾動事件的方法
這篇文章主要介紹了監(jiān)聽element-ui table滾動事件的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
使用webstorm配置vue+element開發(fā)環(huán)境
這篇文章主要介紹了使用webstorm配置vue+element開發(fā)環(huán)境，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue滑動吸頂及錨點定位的示例代碼,代碼簡單易懂，非常不錯對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
解決vue-router進行build無法正常顯示路由頁面的問題
下面小編就為大家分享一篇解決vue-router進行build無法正常顯示路由頁面的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue3中el-table表格數(shù)據(jù)不顯示的原因和解決方法
這篇文章主要給大家介紹了Vue3中el-table表格數(shù)據(jù)不顯示的原因和解決方法,文中有詳細的代碼示例供大家參考,如果有遇到相同問題的朋友可以參考閱讀本文,希望能夠幫到您2023-11-11
這篇文章主要介紹了手寫實現(xiàn)Vue計算屬性，本文從一個簡單的計算屬性例子開始，一步步實現(xiàn)了計算屬性。并且針對這個例子，詳細分析了頁面渲染時的整個代碼執(zhí)行邏輯，需要的小伙伴可以參考一下2022-08-08
本篇文章主要介紹了VUE元素的隱藏和顯示（v-show指令)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06