解決vue單頁面應(yīng)用打包后相對路徑、絕對路徑相關(guān)問題
在項目開發(fā)過程中，在部署過程中，用到了反向代理，這就要求前端代碼中不能使用絕對路徑。但是我們知道，一般情況下，通過webpack+vuecli默認(rèn)打包后的HTML、css、js等文件，使用的都是絕對路徑。下面可以舉幾個例子來看一下：
1、打包后的index.html文件
2、打包后的css文件
所以，如果在項目中需要使用相對路徑來獲取靜態(tài)的資源文件，需要怎么做呢？
1、修改webpack配置文件中的assetsPublicPath，修改為如下圖所示。
修改配置后，進行打包發(fā)現(xiàn)，打包后的index.html文件中，對css等文件的調(diào)用，變成相對路徑。
但是同時我們也會的發(fā)現(xiàn)這樣修改后，導(dǎo)致打包后的css文件中，圖片的路徑出現(xiàn)問題，如下所示，圖片路徑出錯導(dǎo)致圖片找不到。
所以仍需進一步修改配置，使其變成如下路徑：
.iradio_flat-yellow{background-image:url(../../static/img/yellow@2x.04850a2.png);
2、 處理圖片路徑問題
在webpack對ExtractTextPlugin插件配置的地方，加入如下代碼（具體值可能有變化，依據(jù)自身項目打包后文件路徑關(guān)系確定）
再次打包，發(fā)現(xiàn)問題解決！
補充知識：Vue-cli 2打包靜態(tài)文件夾static打包路徑報錯，開發(fā)中使用絕對路徑，打包后部署到二級目錄，絕對路徑?jīng)]用改變。
在開發(fā)中，如果使用絕對路徑在運行測試環(huán)境是沒用任何問題的
但是在打包后，路徑是回安裝原來寫的路徑完全不改變的搬過去。
那么在部署在二級目錄下，讀取根目錄肯定會報錯
解決辦法：在開發(fā)中使用相對路徑
主要文件
config->index.js
build->assetsPublicPath: '/二級目錄/'
最后的斜線很重要不能省略
static靜態(tài)文件
build->utils.js
exports.cssLoaders下的function generateLoaders
if (options.extract) {
return ExtractTextPlugin.extract({
里面添加publicPath: '/二級目錄/'中間寫二級路徑地址，后面的也是斜線很重要，不能省略
以上這篇解決vue單頁面應(yīng)用打包后相對路徑、絕對路徑相關(guān)問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue折疊面板組件的封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章介紹了Vue路由vue-router的用法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01
這篇文章主要介紹了vue自動化路由的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
使用FileReader API創(chuàng)建Vue文件閱讀器組件
這篇文章主要介紹了使用FileReader API創(chuàng)建一個Vue的文件閱讀器組件,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了vue父組件異步傳遞props值,子組件接收不到解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue中h5端打開app(判斷是安卓還是蘋果),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要介紹了vue.js template模板的使用，主要是模仿餓了么布局，用到了4個組件，分別是header.vue,goods.vue,ratings.vue,seller.vue，感興趣的朋友跟隨腳本之家小編一起看看實現(xiàn)代碼2018-08-08
Element Notification通知的實現(xiàn)示例
這篇文章主要介紹了Element Notification通知的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
今天小編就為大家分享一篇vue 獲取及修改store.js里的公共變量實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue實現(xiàn)兩級select聯(lián)動+input賦值+select選項清空
這篇文章主要介紹了vue實現(xiàn)兩級select聯(lián)動+input賦值+select選項清空過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08