html页面统一绝对路径

如何将所有的html页面引用同一个绝对路径,我不想在每个html的<base href=""> 中都要写绝对路径(这样如果地址变了所有的页面都要修改很麻烦),怎么实现每个页面的头部引用同一个绝对路径变量?求问,怎么实现

阅读 3.1k
2 个回答

本身这个属性就是以页面起效的,所以只能每个页面去设置。
如果不想单独设置,可以考虑需要的页面都放置在相同的目录下,这个目录和相对路径有稳定的关系。

如果地址变了所有的页面都要修改很麻烦

不太清楚地址为什么会频繁变化。假如你有一个不会变的 base.js,在里面写

const href = "some/path"
$("head").append(`<base href="${href}"/>`)

但是这样每次要先加载一个 js,体验不是很好,考虑 gulp

// gulpfile.js

const {
    src, dest
}                    = require("gulp")
const through2        = require("through2")

const change_base = () => src("path/to/your/*.html") // TODO: 修改路径
    .pipe(through2.obj((fi, _, cb) => {
        if (fi.isBuffer()) fi.contents = Buffer.from(
            // 应该不会有多个 <base>
            fi.contents.toString().replace(/<base[^]*?>/, () =>
                `<base href="${ process.argv[1] }"/>`
            )
        )
        cb(null, fi)
    }))
    .pipe(dest("path/to/your")) // TODO: 修改路径
    
module.exports = {
    change_base
}

然后就可以很舒适地使用:

$ gulp change_base some/path

未经检验,可能有错

没有安装 gulp 的话

$ npm i -g gulp # 全局也装一个吧
$ npm i -D gulp
$ npm i -D through2 # 是脚本需要的插件
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题