1. 程式人生 > >vue-cli專案打包後圖片路徑問題

vue-cli專案打包後圖片路徑問題

專案目錄結構如下(圖片習慣放在src->assets->img裡面)


第一步,修改config目錄裡面的index.js檔案

將 assetsPublicPath: '/' 改為 assetsPublicPath: './'


第二步,修改build目錄裡面的utils.js

加入 publicPath: '../../',

接下來就可以愉快的npm run build打包啦~~~

相關推薦

vue-cli專案打包圖片路徑問題

專案目錄結構如下(圖片習慣放在src->assets->img裡面)第一步,修改config目錄裡面的index.js檔案將 assetsPublicPath: '/' 改為 assetsPublicPath: './'第二步,修改build目錄裡面的utils.

vue+webpack專案打包背景圖片載入不出來

在做VUE +的WebPack腳手架專案打包完成後,在IIS伺服器上執行發現專案中的背景圖片載入不出來檢查專案程式碼發現是因為CSS檔案中,背景圖片引用的路徑問題;後來通過修改配置檔案,問題終於解決了,解決方法如下: 1.修改資源路徑 在VUE +的WebPack專案中,專案打包後的CSS和

vue webpack打包圖片路徑錯誤的解決方法

專案用run dev build 打包後,發現很多圖片都不顯示,在本地是沒有問題的啊!找原因發現通過webpack+vuecli預設打包的css、js等資源,路徑都是絕對的。 9E3E9C06-4873-4D1B-A5B3-35C71889249E.png 因為我們的圖片路徑都是經歷過

vue-cli專案打包需要修改的路徑問題

1. 命令列輸入:npm  run  build     打包出來後項目中就會多了一個資料夾dist,這就是我們打包過後的專案。 第一個問題,檔案引用路徑。我們直接執行打包後的資料夾中的index.html檔案,會看到網頁一片空白,f12除錯,全是css,js路

vue-cli webpack打包加載資源的路徑問題

vue專案,訪問打包後的專案,輸入路徑後,頁面載入空白。這時會有兩類問題,都是路徑問題。 1.一個是css,js,ico等檔案載入不到,是目錄裡少了dist 開啟頁面時一片空白 解決辦法: config/index.js檔案的build->assetsPub

前端框架Vue(12)——如何將 vue-cli 專案打包壓縮(npm run build)放到伺服器

  當我們將 vue 專案完成後,面臨的就是如何將專案進行打包上線,放到伺服器中。我使用的是 vue-cli(simple) 腳手架,所以就講一下如何將專案進行打包,並放到 tomcat 上。   如果是 vue-cli (非 simple 腳手架),這篇

關於vue打包圖片路徑找不到的問題

//asserts引入的靜態資源是相對路徑 //而static引入靜態資源時必須是絕對路徑 slides: [ { //當asserts引入動態繫結的靜態資源時,需要以模組的方式匯入資源, //將圖片作為模

解決vue-cli build打包CSS瀏覽器相容字首自動去除的問題

今天做練手專案部署的時候碰到了個奇怪問題,開發環境裡顯示得好好的CSS prefixer樣式,到production環境就消失了。 我開發環境用的是 scss ,剛開始我還以為是 scss 處理器的問題,後來研究了下 build 指令碼,發現人家把CSS統一用一個外掛給壓縮了,然後追查之下發現這個外

vue-cli如何打包圖片上傳丟失問題

vue專案的打包 需要修改config/index.js裡的assetsPublicPath的欄位,初始專案是/他是指向專案根目錄的也是為什麼會出現錯誤,這時改為./ 如下: build: { // Template for index.html

vue-cli build打包CSS瀏覽器相容字首自動去除的問題

今天構建發現 原本是很正常的一個相容性寫法漸變。結果npm run build專案時background: -webkit-linear-gradient(left,#ccc,#fff)backgrou

關於vue-cli腳手架打包vendor檔案過大

大家會遇到打包後文件很大,導致頁面初始化載入的速度很慢。會出現白屏的現象。這一般是你打包的vendor太大的緣故。如果你打包後看到你的vendor檔案有700kb以上。你就要考慮怎麼處理。 處理這種檔案的 1、把不常改變的庫放到index.html中,通過c

vue專案打包資源相對引用路徑的和背景圖片路徑問題

vue專案中若要使用相對路徑來獲得相應靜態資源, 在一般專案 build 之後都會生成一個 index.htm 檔案和 一個 static 資料夾,而 static 這個資料夾需要被放置在根目錄下, 1.需要找到config --- index.js(webpack 是依據index.js 來自動生成檔案

Vue項目打包背景圖片路徑錯誤

resolv sse options require xtra pro gpo 解決方案 ron vue項目打包之後背景圖片出錯的解決方案如下: 1,找到 config->index.js裏面,如下修改 默認配置:  env: require(‘./prod.

Vue專案打包,靜態資源路徑出錯

一,css、js路徑出錯 1.1 特徵: 這種情況表現為頁面顯示是空白的! 1.2 解決方案 進入config ==> index.js 檔案 二,圖片路徑出錯 2.1 特徵: 本地測試沒問題,但是打包之後,路徑就亂了

vue-cli構建的vue項目打包css引入的背景圖路徑不對的問題

public 相對 根據 路徑 span 目錄 圖片 pub 正常 使用vue-cli構建vue項目後,再打包遇到一個css引入的背景圖片路徑的問題,就是css代碼中背景圖片是根據相對路徑來寫的,如下圖:    當使用npm run dev命令本地訪問的時候,背景圖片是正常

vue系列---專案打包找不到圖片路徑

在測試環節發現有圖片找不到,發現是圖片路徑沒有寫對。 報錯如下: 原始碼: <img src="/src/assets/img/arrow.png" alt="" class="col-step"> 這種引入圖片的方式是錯誤的

vue專案打包,npm run build相關配置,以及解決專案打包圖片404,背景圖片找不到,iview程式碼出問題的情況

1.首先找到config下的index.js檔案 將build下的assetsPublicPath的斜槓換成./ 操作如下 只需要換build中的就可以 dev中的assetsPublicPath不用動 不然打包過後 npm run dev的時候直接出現can not Ge

vue-cli打包iconfont路徑問題

第一次做vue的專案,記錄一下遇到的問題以及解決方法,用npm run build打包專案之後發現iconfont引用的檔案路徑不對,在網上查詢資料後,找到了解決方法:找到build下面的utils.js檔案,如圖所示位置加上publicPath: '../../'這句即可解

vue打包圖片資源background引入路徑載入失敗

1 url前加上‘[email protected]’ background: url([email protected]/../static/images/me/img.png) no-repeat; 2 build/utils.js加上publicP

vue 如何配置使項目打包圖片文件的引用路徑改為cdn路徑?

out 內聯 ebp 希望 方式 pack 作用 itl 項目打包 vue cli3項目, 需求: 圖片文件打包時, 將項目內的所有圖片文件的引用地址改為cdn路徑 vue cli3的默認配置下, 打包後圖片使用的是相對路徑, 例如打包後項目內圖片引用路徑為 img/xx