vue-cli構建的vue項目打包後css引入的背景圖路徑不對的問題
使用vue-cli構建vue項目後，再打包遇到一個css引入的背景圖片路徑的問題，就是css代碼中背景圖片是根據相對路徑來寫的，如下圖：
當使用npm run dev命令本地訪問的時候，背景圖片是正常顯示的，可使用npm run build命令打包後，訪問dist目錄下的項目，頁面背景圖路徑就不對了
解決方法：只需要在build/utils.js文件中添加如下一行代碼即可。
publicPath:‘../../‘
如下圖：
這樣就解決這個問題。
vue-cli構建的vue項目打包後css引入的背景圖路徑不對的問題
相關推薦
vue-cli構建的vue項目打包後css引入的背景圖路徑不對的問題
public 相對 根據 路徑 span 目錄 圖片 pub 正常 使用vue-cli構建vue項目後，再打包遇到一個css引入的背景圖片路徑的問題，就是css代碼中背景圖片是根據相對路徑來寫的，如下圖： 當使用npm run dev命令本地訪問的時候，背景圖片是正常
vue-cli構建的項目中請求代理與項目打包
inf 構建 src gpo alt image 請求 class 項目打包 vue-cli構建的項目中，生產模式下的打包路徑、與生產模式下的請求代理簡單示意 vue-cli構建的項目中請求代理與項目打包
vue 如何配置使項目打包後圖片文件的引用路徑改為cdn路徑?
out 內聯 ebp 希望 方式 pack 作用 itl 項目打包 vue cli3項目, 需求: 圖片文件打包時, 將項目內的所有圖片文件的引用地址改為cdn路徑 vue cli3的默認配置下, 打包後圖片使用的是相對路徑, 例如打包後項目內圖片引用路徑為 img/xx
vue-cli構建vue項目
cnblogs 初始化 vue-cli install 使用 base title image net 1.安裝node.js 2.安裝npm install -g vue-cli 3.使用vue-cli初始化項目：vue init webpack myproject
Vue項目打包後背景圖片路徑錯誤
resolv sse options require xtra pro gpo 解決方案 ron vue項目打包之後背景圖片出錯的解決方案如下： 1，找到 config->index.js裏面，如下修改 默認配置： env: require(‘./prod.
Vue項目打包後，只能訪問首頁，其他頁面路徑找不到
nbsp sets 參數 nod strong tput set uil env webpack.prod.conf.js 中output添加參數publicPath:‘./‘ 修改webpack.base.conf.js中： publicPath: process.e
vue項目打包後頁面空白
pbo oui idg ssis iii dir conf 分享圖片 uia 原因：打包後的dist目錄下的文件引用路徑不對，會因找不到文件而報錯導致白屏。 解決辦法：修改一下config下面的index.js中bulid模塊導出的路徑。因為index.html裏邊的內容
Vue-cli搭建完項目，各文件解釋
npm out 編輯 static 插入 router 搭建 項目源碼 module 腳手架vue-cli搭建完成後，會生成一些文件，總結學習一下這些文件是做什麽用的：1、一級目錄： build和config文件夾是wbepack配置的文件夾； node_modules
在vue-cli生成的項目中使用karma+chrome進行單元測試
使用 設計實現 測試用例 runner 服務 進行 ui界面 包含 node 用vue-cli生成項目時，如果選擇了單元測試，那麽會采用karma+mocha作為單元測試框架，默認使用的瀏覽器是PhantomJs。 Karma是一個基於Node.js的JavaScri
Vue-cli創建項目從單頁面到多頁面4 - 本地開發服務器設置代理
根目錄 control .com 目錄 pre 使用 exp class ble 前後端分離開發時，有時候會遇到跨域的情況：只在開發的時候存在跨域，項目上線後，由於配置的域名相同，跨域就會不存在。 這個時候，有兩種方案可以比較快的解決： 1、利用h5的特性，使用cors，在
使用vue-cli腳手架搭建項目，保存編譯時出現的代碼檢查錯誤（ESLint）
rip 正則 fin 外部 內置 global 同名 esp 復雜 一、問題 出現這麽寫錯誤是什麽原因呢？相信很多小白都會像我一樣，第一次接觸時有點二丈和尚摸不著頭腦。其實是在你用vue-cli腳手架構建項目時用了ESLint代碼檢查工具，如下圖 那麽什麽是ESL
Vue-vue-cli初始化項目
try main clas cli ron http 默認 文件 導致 一、下載安裝node.js下載地址：https://nodejs.org/en/download/，選擇合適自己的版本下載，我下載的是Windows Installer (.msi) 32.bit
51.webpack vue-cli創建項目
oba lan rate 說明 操作 follow 命令 with fail 在上兩篇博文中已經安裝了node.js、webpack、vue-cli，安裝的版本為： 今天通過這篇博文創建項目。 1.選擇路徑 首先通過命令行進入想要創建項目的路徑，例如： 通過e:命令進入盤
vue-cli腳手架搭建項目整理筆記
框架 請求 解壓 第一次 spl dep 相對 筆記 bsp 筆記是整理之前開發外賣APP的整個設計框架和搭建基礎以及如何修改配置方面。老實說第一遍寫的時候腦袋裝不下，第一次開發時自己手寫了些筆記，但是當時恨不得把整個全寫下來，可是內容太多了，就寫了些關鍵的地方。寫完後自己
Vue.js之使用vue-cli初始化項目
.com 所有 一個 install pro git tps img step 一、安裝步驟 step1、安裝Node.js 首先需要下載並安裝Node.js，下載地址：Node官網。 可查看我的另外一篇文章，僅作參考：Node.js入門及安裝 測試安裝是否成功，打開cmd
vue-cli搭建及項目目錄結構
地址 所有 config文件 tor 防止 風格 asset set 腳手架 今天總結一下vue的腳手架的搭建。很簡單，今天我們就來說一下 一、vue 腳手架的搭建。 對於腳手架的具體搭建方法，我這裏不在很詳細的書寫，具體方法我推薦菜鳥教程的方法，和具體，你一步一步的來
基於Vue-cli 快速搭建項目
信息 創建項目 sel 安裝方法 font users 配置 ali 完成 Vue-cli可以快速幫助我們創建一個項目，這是官方給我們提供的腳手架。下面我說一下vue-cli的使用方法。 一、準備工作 在使用vue-cli時，首先需要安裝nodejs，npm，其次需全局
使用@vue/cli初始化項目
格式 bpa 全面 搭建 testing 單元 sta bsp 包含 Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli。 如果你已經全局安裝了舊版本的 vue-cli (1.x 或 2.x)，你需要先通過 npm uninstall vue-cli
Vue+webpack構建一個項目
-- 使用命令 進制 div 函數調用 prop outer pick 全局對象 1、安裝CLI命令的工具 推薦用淘寶的鏡像 npm install -g @vue/cli @vue/cli-init 2、使用命令構建一個名為myapp的項目 vue i
vue-cli創建項目報錯"ChromeDriver binary is unavailable"
ins 圖片 http 項目 ext rom htm nav vue 在使用vue init webpack -g demo時產生了一個錯誤,導致創建項目失敗: "Current existing ChromeDriver binary is unavailable, p