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

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

html入口文件在php的服務(wù)器中；

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

解決方案：

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

這里又出現(xiàn)一個問題，我們的靜態(tài)資源路徑是動態(tài)的，每次發(fā)布會生成一個版本號；

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

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

下面是gulp的配置方式。

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

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, }... }

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。