vue-cli4 webpack配置静态资源的cdn地址

咱们的项目是经过vue-cli4生成的vue3项目，目前的需求是将打包后的前端资源，除去index.html入口文件，和favicon.ico文件，其他的资源都上传到cdn上去，减轻服务器压力。

在没改以前，咱们的打包目录结构是这样的：

咱们分红三步进行：

1.将全部的静态资源都放到一个static目录下，便于运维人员一次性cp操做。

2.将index.html中的app.js引用改成cdn路径。

3.将项目中所使用到的image，font资源路径改成cdn路径。

1.生成static目录存放静态资源

这里vue-cli4提供咱们一个配置assetDir文档连接-assetsDir: 设置打包后的静态资源路径

默认是：

配置完成后是：

2.将index.html中的静态资源引用改成cdn路径

这里vue-cli4提供咱们一个配置publicPath文档连接-publicPath: 设置打包后的html中资源的指向

默认是：

配置完成后是：

这个publicPath只是改变了html中的资源引用路径，可是咱们项目中使用到的图片、字体等资源仍是没有处理，仍然是相对路径。经过下面这张图咱们能够看出来

这里就须要咱们去改在build的时候webpack的配置了。从目录结构上咱们能够看出来，vue-cli4建立的vue3项目并无把webpack的配置信息暴露出来，都内置在脚手架中了。

3.将项目中所使用到静态资源路径改成cdn路径

经过查阅vue-cli4的文档咱们能够看到vue-cli4 链式操做-高级, vue-cli提供了咱们修改loader配置的方法。

那好比说咱们要改image、fonts的配置，要怎么看原来的配置是什么样的，要怎么写呢？

审查项目的-webpack-配置，这个文档中提供了咱们一条命令将全部的webpack配置都暴露来，便于查看。注意只是查看，在里面该配置是不会生效的。

vue inspect > webpack-config.js // 官网写的是output.js 文件名无所谓
复制代码

这里咱们就能看到项目中，所使用的webpack信息了，那咱们只要根据上面给出的链式调用的方式，对咱们所须要处理的资源进行修改就行了

在这个项目中，由于咱们要在部署时，将除了index.html、favicon.ico都部署到cdn上去，因此咱们须要处理项目中用到的image、svg、和字体文件。其中的staticPrefix是我经过环境变量判断生成的要嵌入连接的前缀地址。

在编译后能够看到，静态资源的地址已经由原来的相对路径，变为了线上路径

这样咱们就将全部的静态资源都从项目中剥离，服务器上只留下入口index.html、favicon.ico，其他的静态资源都配到了cdn上。