如果你想将一段js脚本代码写入 Vue 项目的index.html文件中，并在 Vue 页面中使用，你需要将该脚本写入 <script> 标签内，同时，将结果放在全局对象上，例如 window 对象，因为 index.html 中的全局脚本和 Vue 组件文件的模块作用域是隔离的。
举个例子： 下面是一段随机生成二级域名的代码,先随机取出一个主域名，然后再根据主域名随机生成4个二级域名，存储在浏览器缓存中，并且设置过期时间。
const mainDomains = ['example.com', 'example2.com', 'example3.com'];
const DAY_IN_MS = 10 * 1000; // 一天的毫秒数
// 设置缓存，附加时间戳
function setCache(key, value) {
const now = Date.now();
const item = {
value,
expiry: now + DAY_IN_MS, // 设置过期时间为24小时后
}
localStorage.setItem(key, JSON.stringify(item));
}
// 获取缓存，检查时间戳是否过期
function getCache(key) {
const itemStr = localStorage.getItem(key);
if (!itemStr) {
return null;
}
console.log('111',itemStr)
const item = JSON.parse(itemStr);
const now = Date.now();
// 如果过期则返回null
if (now > item.expiry) {
localStorage.removeItem(key);
// 清空所有的localStorage
localStorage.clear();
return null;
}
return item.value;
}
let mainDomain = getCache('mainDomain');
if (!mainDomain) {
mainDomain = mainDomains[Math.floor(Math.random() * mainDomains.length)];
setCache('mainDomain', mainDomain);
}
let subDomains = getCache(mainDomain);
if (!subDomains) {
subDomains = Array.from({length: 4}, () => `https://${Math.random().toString(36).substring(2, 8)}.${mainDomain}`);
setCache(mainDomain, subDomains)
}
export { mainDomain, subDomains };
正常来说我们直接将上面的代码写在.js或者.ts文件(config.ts)，然后在vue3页面上直接用import引入即可。
import {subDomains} from '@/config'
console.log(subDomains)
问题
但是问题是，每次我们修改这个配置的时候，都要重新编译一遍项目。所以我们要弄成一个js脚本。
我们在index.html中添加以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <link rel="icon" href="/favicon.ico">-->
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" src="/"></script>
<title>你好导航</title>
</head>
<script>
const mainDomains = ['example.com', 'example2.com', 'example3.com'];
const DAY_IN_MS = 10 * 1000;
function setCache(key, value) {
const now = Date.now();
const item = {
value,
expiry: now + DAY_IN_MS,
}
localStorage.setItem(key, JSON.stringify(item));
}
function getCache(key) {
const itemStr = localStorage.getItem(key);
if (!itemStr) {
return null;
}
const item = JSON.parse(itemStr);
const now = Date.now();
if (now > item.expiry) {
localStorage.removeItem(key);
localStorage.clear();
return null;
}
return item.value;
}
let mainDomain = getCache('mainDomain');
if (!mainDomain) {
mainDomain = mainDomains[Math.floor(Math.random() * mainDomains.length)];
setCache('mainDomain', mainDomain);
}
let subDomains = getCache(mainDomain);
if (!subDomains) {
subDomains = Array.from({length: 4}, () => `https://${Math.random().toString(36).substring(2, 8)}.${mainDomain}`);
setCache(mainDomain, subDomains)
}
window.domainModule = {
mainDomain: mainDomain,
subDomains: subDomains
};
</script>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
然后，在 Vue 组件中，你可以通过window.domainModule访问 mainDomain 和 subDomains：
console.log('window.domainModule.subDomains,',window.domainModule.subDomains);
但要注意，将变量绑定到全局作用域（如 window 对象）并非最佳实践，尽可能避免使用，因为这可能导致命名冲突等问题。在大型应用中，建议使用模块系统（ES6 modules，CommonJS）管理你的代码。
评论(0)