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上。