Vue静态资源上CDN方案简述

最新推荐文章于 2026-04-25 09:11:26 发布

转载最新推荐文章于 2026-04-25 09:11:26 发布 · 2.6k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://juejin.cn/post/6923096892494741518

标签

#vue.js #javascript #前端

文章介绍了Vue项目如何配合CDN进行静态资源部署，包括设置publicPath和outputDir，确保资源引用使用绝对地址。在开发和构建过程中，通过调整配置使得资源正确引用，并提到了Nginx的配置以及不同环境下的兼容方案，特别是在模板、脚本和预处理器中的资源路径处理。

描述

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