webpack打包vue項目,生成的css和JavaScript由絕對路徑改爲相對路徑

場景:使用nginx做了反向代理,所有的靜態資源訪問都需要加個前綴。例如:http://xxxx:8080/login,需要加前綴web/改爲:http://xxxx:8080/web/login,則需要修改配置文件,把css和JavaScript的引用目錄改爲相對路徑。

未改之前打包後的index.html文件引用css和JavaScript,都是絕對路徑,如圖:

 

修改配置文件只需修改兩個文件即可。

一、修改項目下config的index.js文件:

          將build下的assetsPublicPath:'/'改爲assetsPublicPath:'./',如下圖:

二、修改項目下build文件夾下的utils.js文件,webpack4和之前版本的改法不一樣,下面兩種都羅列出來:

           (1)webpack4之前的版本,在ExtractTextPlugin插件配置的地方下加上publicPath:'../../',如圖:

(2)在webpack4版本中,在options下加上publicPath:'../../',如圖:

最後打包驗證結果,引用爲相對路徑,如圖:

發佈了30 篇原創文章 · 獲贊 24 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章