我們的項目HTML文件單獨放在一個服務器上，靜態資源js、css、images放在我們的靜態資源服務器上，這樣部署后會出現一個問題，css文件中的圖片相對路徑，在html的服務器上就會變成

//html文件的地址 http://nb.weiboyi.com

html入口文件在php的服務器中；

js，css，image在單獨的cdn上，存在一個問題，就是css文件中引用圖片的路徑是相對路徑，但是服務器發起請求時相對路徑是根據瀏覽器地址欄的location路徑；這就存在一個問題，location的路徑下沒有對應的image資源：

解決方案：

類似webpack的解決方案，將小圖片通過base64打包到css文件中；將大文件的路徑替換成全路徑。

這里又出現一個問題，我們的靜態資源路徑是動態的，每次發布會生成一個版本號；

cdn.xxx.com/static/xxx_version/css/main.css;

解決辦法，就是將cdn的路徑，設置成環境變量，通過環境變量替換css文件中的路徑。

下面是gulp的配置方式。

function 這樣做是因為我們的項目是老項目了，沒有使用模塊化開發的方式寫代碼；所以只能使用gulp這樣的構建工具；

create-react-app解決這個問題：

// 在命令行使用 linux，macos；命令行寫的好處是可以通過jenkins注入 PUBLIC_URL=http://cdn.weiboyi.com npm build//在.env.development文件中寫也可 background:url(process.env.PUBLIC_URL)

在webpack中的配置，

module.exports = {...output: {...publicPath: publicPath, }... }

總結

以上是生活随笔為你收集整理的js修改地址栏url_在gulp、create-react-app中css，js中的文件路径的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。