vue项目在public index.html文件中添加变量方式
作者：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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。