vuepress add cdn link

post on 2019-05-22 Mon 15:10

换上了vuepress之后,使用起来确实不错,写东西还是比较能专注,而且市面上又有不少好用的markdown书写工具,写起来更是事倍功半。更加专注于絮絮叨叨,吼吼!

自己的空间默认完全足够了,但是现在有个需求,通过这种方式部署一类更复杂的系统,这里就涉及到了静态资源的部署,大量的资源如果不走cdn link,对现有服务器的带宽是个考量,但是官方文档也没有什么比较细致的描述去支持资源增加前缀

要说增加前缀的方式也不是什么很合适的方法,索性直接在引用资源的时候,直接用外部资源好了啊?那不是更方便吗。对于静态发布来说,这肯定是最合适的方式,cdn资源也可以通过其他方式进行管理,这样系统反而更简单便捷。但是!添加前缀,这就是个需求,呵呵~~~ 所以得操作操作。

把文档反过来复过去的日了好多遍之后,官方文档中没有任何的直接支持配置,可真是让我愁了半天。不过,之前是有做过vue的开发,它在build的时候,是可以通过webpack指定输出前缀的,所以想通了,肯定只能通过编译期进行调整。目前整个可配置的路径中只有这2是归属于webpack的入口,或者是说vue-loader的入口,其他暂时还没看到有配置的地方。不管了,先试试。

configureWebpack: (config, isServer) => {
}

chainWebpack: (config, isServer) => {
    // config 是 ChainableConfig 的一个实例
}

根据Webpack-chain 整个文档介绍来看,只有诸如path,publicPath,resolve之类的看着有点像(请原谅我对webpack的配置项还没有熟悉到那么深),根据之前vue项目设置中的设置项key来看,publicPath应该是最合适的了,所以放在那个配置接口下呢?根据文档来说,2个入口都可以对webpack内部的配置进行修改,我最终用了chainWebpack来进行设置。i.e 两个都行,任选一个

configureWebpack: {
    output: {
      publicPath: 'http://f**k.io/'
    }
}

or

chainWebpack: (config, isServer) => {
    config.output.publicPath('http://f**k.io/')
}
// 实际输出是,页面上通过webpack处理的资源路径都会自动追加http://f**k.io/
// i.e http://f**k.io/assets/js/9.07e65bae.js