vue cli 搭建專案中,img引用資源404

2022-08-22 17:03:13 字數 725 閱讀 8782

vue-cli 3.0搭建專案,create 以後,在某個頁面,引用資源,資源路徑沒問題,run serve 除錯,就是顯示不出來,

前台頁面開啟,f12檢視

發現serve時瀏覽器解析這段路徑為主網域名稱加位址了

查閱資料發現,vue-cli3中內建的webpack會把當做乙個模組引用,然後打包等等,路徑就不對了,我們的靜態資源是不需要打包等等的,vue-cli3 中解決這個問題的方法是:

1.將引用的本地資源放在static/中檔案需要以絕對路徑的形式引用:/static[filename]----------webpack打包時,該目錄會會忽略不做處理

2.引入專案的根路徑字首 baseurl,強制寫全url路徑

3.對於改靜態路徑資源,在使用前,使用require載入完全(這個不要動腦子,博主用的就是這個,哈哈哈。。。)

vue cli 專案搭建

1 因為之前已經安裝過node.js和git,所以直接用npm 2 吶吶吶npm速度慢是一定的了,所以用 映象,將npm cnpm 這裡寫 片3 開啟cmd,進入想要建立專案的目錄下,輸入 vue init webpack projectname4 安裝提示選擇 project name 專案名稱 ...

vue cli搭建專案

一 安裝node 不做詳述 我的node安裝位置d program files 安裝檔案包名是nodejs 即 d program files nodejs 如果是直接在d盤的node資料夾 那就是d node 配置環境變數 我的電腦 計算機右鍵 高階系統設定 環境變數 系統變數中 path 追加 ...

vue cli搭建專案

配置npm的映象源 npm config set registry也可以使用cnpm npm install g cnpm registry 全域性安裝vue cli npm install g vue cli 建立乙個資料夾 md vue test 進入資料夾建立vue cli專案 vue ini...