最近在研究vue,老實的按照官網提供的,搭建的了 webpack+vue+vuex+vue-router,,因為是自己搭建的,所以踩了不少坑,一般問題百度都有,這個背景圖片的問題,查了很久才解決。 1、找到 config->index.js里面,如下修改 2、找到 build-> ...
資源相對引用路徑 問題描述 一般情況下,通過webpack vuecli默認打包的css js等資源,路徑都是絕對的。 但當部署到帶有文件夾的項目中,這種絕對路徑就會出現問題,因為把配置的static文件夾當成了根路徑,那么要解決這種問題,就得引用相對路徑。 解決辦法 打開webpack.prod.conf.js 找到output:增加publicPath: . , 即可,如圖。 那么這樣后,資 ...
2018-01-11 15:52 1 17710 推薦指數:
最近在研究vue,老實的按照官網提供的,搭建的了 webpack+vue+vuex+vue-router,,因為是自己搭建的,所以踩了不少坑,一般問題百度都有,這個背景圖片的問題,查了很久才解決。 1、找到 config->index.js里面,如下修改 2、找到 build-> ...
第一種方法: 原因: 首先,出錯點在url-loader上面。 這里解釋一下上面這段url-loader配置,test是正則匹配規則,匹配項目中所有的以正則規則結尾的格式的文件,直白點就是所以的圖片(png,jpg,jpeg,gif,svg)。然后用url-loader進行處理。處理也有 ...
1.原因解析 當用vue-cli自動構建項目后,有兩種運行方法,分別是: npm run dev : 提供一個開發的環境,自動熱更新,資源使用絕對路徑,所以可以正常看到背景圖片。 npm run build : 打包項目,資源使用相對路徑,所以會出現路徑錯誤問題。 注: 絕對路徑 ...
問題 項目在開發環境下工作正常,當打包后圖片不見了,檢查元素后發現路徑出錯了。圖片路徑是這樣:background: url(/static/img/bg_camera_tip.bd37151.png),但該路徑下文件並不存在。 打包后文件目錄如下: 可以看到背景圖片的路徑應該是 ...
vue項目中若要使用相對路徑來獲得相應靜態資源, 在一般項目 build 之后都會生成一個 index.htm 文件和 一個 static 文件夾,而 static 這個文件夾需要被放置在根目錄下, 1.需要找到config --- index.js(webpack 是依據index.js ...
相信有很多同學在學習vue的剛開始都遇到過項目打包發布后發現CSS中的背景圖片不顯示,具體如何解決只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders 方法,如下代碼,增加 publicPath: '…/…/' ...
vue項目中,在css樣式中引用了一張背景圖片,開發環境下是可以正常顯示,build之后背景圖片不顯示。 解決方法: 找到build/utils.js文件 修改成為如下所示內容: 添加紅框中的內容即可。 ...
../表示返回上一級文件夾。 直接尋找到相應圖片路徑即可。 ...