Vue静态资源上CDN方案简述_vue cdn

描述

CDN原理简析 juejin.cn/post/684490…

设有Vue工程example打包，在服务器/web/example/目录部署以下资源，

|-- index.html
|-- static
    |-- js
    |-- img
    |-- css
复制代码

静态资源的域名假定为static.example.cn，站点的域名为www.example.cn。

打包构建的时候，静态资源需要以绝对地址来引用，比如js/app.[hash].js在构建后有目录作为区分，最终可能为static.example.cn/web/example/js/app.[hash].js。

已知Vue的config提供publicPath来配置资源路径，outputDir来指定输出目录。可参Vue CLI文档

const staticHost = '//static.example.cn'const baseURL = '/web/example/'复制代码

实践方案

上面说道，部署后访问的静态资源为绝对地址static.example.cn/web/example/，也就是说我们要把资源引用都加上这个前缀。我们开始配置第一步：

const publicPath = `${staticHost}${baseURL}`const outputDir = path.join(process.cwd(), `dist/${basePath}`)
 
module.exports = {
  publicPath,
  outputDir,
  // ...
}
复制代码

完成第一步后，我们打包可以发现，资源的输出目录变为了：

|-- web
    |-- example
        |-- index.html
        |-- static
            |-- js
            |-- img
            |-- css
复制代码

html中的引用js如下：

<scriptsrc=https://static.estudy.cn/web/example/js/app.0f9f5416.js></script>复制代码

如下代码中测试图片的引入，然后配nginx，host，第二步模拟环境测试。

<template><div><imgsrc="~static/img/bigdata/ranking/header_bg.gif"alt=""><img:src="testImportSrc"alt=""><img:src="testSrc"alt=""><img:src="false || 'static/img/bigdata/ranking/header_bg.gif'"alt=""><!-- 下面的方式是有问题的，忽略 --><img:src="false || '~static/img/bigdata/ranking/header_bg.gif'"alt=""></div></template><script>import testImportSrc from'static/img/bigdata/ranking/header_bg.gif'exportdefault {
  data() {
    return {
      testSrc: require('static/img/bigdata/ranking/header_bg.gif'),
      testImportSrc,
    };
  },
}
</script>复制代码

dev

build

可以看到，运行时逻辑引入的资源路径，loader是不做处理的，所以我们需要对这种写法做兼容方案处理。

兼容方案简述

以下方案需要区分development/production环境。

publicPath可以通过process.env.BASE_URL来获取。

Vue模板template中

在mixins或者Vue.prototype挂上BASE_URL。

<img:src="false || `${BASE_URL}static/img/bigdata/ranking/header_bg.gif`"alt="">复制代码

js脚本中

可以考虑在window上挂，如果是.vue文件中，如上述挂在原型，this.BASE_URL获取。

constBASE_URL = process.env.BASE_URL || ''// 或window.BASE_URL = process.env.BASE_URL || ''// .vue script`${this.BASE_URL}static/img/bigdata/ranking/header_bg.gif`复制代码

scss中

通过css.loaderOptions.sass配置sass的loader，注入$BASE_URL变量，在scss中使用（less等预处理同理）：

background: url("#{$BASE_URL}static/img/bigdata/ranking/header_bg.gif")

转载自链接：https://juejin.cn/post/692309689249474151