本文介绍如何利用 window.location 动态构建 标签的 src 属性，使前端能自动适配当前域名及指定端口（如Apache的9443），避免硬编码，提升跨服务部署的灵活性与可维护性。
本文介绍如何利用 `window.location` 动态构建 `<script>` 标签的 `src` 属性，使前端能自动适配当前域名及指定端口（如apache的9443），避免硬编码，提升跨服务部署的灵活性与可维护性。</script>
在混合部署架构中（如Tomcat应用服务器 + Apache静态资源服务器），常需将JS、CSS等静态资源托管在独立HTTP服务上（例如Apache监听 https://localhost:9443），而主页面由另一端口（如Tomcat的 8443）提供。此时若直接写死 <script src="https://localhost:9443/app-common/index.js"></script>，会导致环境迁移困难（如从 localhost 切换到测试/生产域名时需批量修改），且违反“一次编写、多环境运行”的工程实践。
解决方案是在HTML中内联一段轻量JavaScript，利用浏览器原生API动态拼接资源URL。核心依据是 window.location 对象——它提供当前页面的协议（protocol）、主机名（hostname）和端口（port），但注意：我们不复用当前页面端口（因静态资源在9443，而页面在8443），而是显式指定目标端口（如 9443），仅动态提取协议与域名部分，确保URL结构安全可靠。
以下为推荐实现方式（兼容HTTPS/HTTP，支持任意域名）：
<meta charset="utf-8"><script>
// ✅ 安全提取协议与主机名（自动适配 http:// 或 https://）
const protocol = window.location.protocol; // 包含冒号，如 "https:"
const hostname = window.location.hostname; // 如 "localhost" 或 "example.com"
const staticPort = 9443; // 静态资源服务端口（Apache）
const staticPath = "app-common/index.js"; // 相对路径
// ? 构建完整URL：https://localhost:9443/app-common/index.js
const scriptSrc = `${protocol}//${hostname}:${staticPort}/${staticPath}`;
// ? 动态注入脚本
const script = document.createElement('script');
script.src = scriptSrc;
script.type = 'text/javascript';
document.head.appendChild(script); // 推荐插入 head，避免阻塞渲染
</script>
⚠️ 注意事项：
- 不要使用
window.location.port：它返回当前页面端口（8443），而非静态资源端口（9443），必须显式声明目标端口。- 协议处理更健壮：
window.location.protocol已自带:（如"https:"），直接拼接//即可，无需substring截取（原答案中protocol.substring(0, protocol.length-1)易出错且冗余）。- DOM插入位置：建议使用
document.head.appendChild()而非document.body.appendChild()，确保脚本在文档解析早期加载，避免因DOM未就绪导致依赖异常。- 跨域与CORS：确保Apache服务器已正确配置
Access-Control-Allow-Origin响应头（如*或精确匹配https://localhost:8443），否则浏览器会拦截请求。
此外，该方案具备良好延展性：protocol 和 hostname 可作为全局变量透传至 index.js，用于动态加载其他资源（如字体、CSS、子模块JS）：
// 在 index.js 中复用
const STATIC_BASE = `${window.location.protocol}//${window.location.hostname}:9443/`;
window.includeJS(STATIC_BASE + "app/app.nocache.js?r=" + Date.now());
window.includeIFrame(STATIC_BASE + "assets/loading.html", "loader");
通过这一模式，彻底解耦前端资源路径与部署环境，实现“零配置切换”——无论开发、测试或生产环境，只需修改 staticPort 变量即可适配不同静态服务器端口，大幅提升运维效率与代码健壮性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
