我们的项目是通过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上。
