執行和編譯時期資源載入的不同 vue

2022-08-25 16:57:32 字數 2565 閱讀 6239

開發語言都有編譯和執行兩個階段,很多時候這個也會帶來許多bug

如:乙個專案在開發階段測試沒有問題,然上線發布後就會有這樣那樣的問題,譬如說的載入,靜態資料(js,css,json)讀取錯誤

接下來我們就使用vue的專案預設首頁面的img來測試

1、使用data掛載url

我們把這個image的src改一下

改為掛載到data 如

儲存重新整理

報404

為啥會這丫呢?最開始的src是直接對映到的真實位址的,這個在編譯期就會根據url把對應的資源打包進去;

而後面src使用data掛載,在編譯時不會將資源打包進去,所執行期根據url尋找就會提示404了

2、使用靜態目錄載入img

解決方法就是直接將移入public目錄(這個是cli3的靜態資源目錄會預設打包進專案)

這樣執行時就能找到了

1、使用axios 根據相對路徑讀取

同理使用axios載入本地json也會遇到同樣問題

如在assets下面我們放乙個json,然在元件讀取

看這個執行時直接是404

2、使用copy-webpack-plugin複製到指定目錄

這個同上面一樣可以移入到public目錄下去,但還有乙個方法可以解決,那就是copy-webpack-plugin這個在加入第三方libs特別有用

1)cli2 拷貝資源方式

cli2直接在webpack.prod.conf.jsplugins下增加即可如

'use strict'

const copywebpackplugin =

require

('copy-webpack-plugin'

)// other configure

plugins:

[// other configure

// copy custom static assets

// copy custom static assets

newcopywebpackplugin([

,])// other configure

]

1)cli3 拷貝資源方式

而最新的cli3要新增乙個vue.config.js同樣新增copy-webpack-plugin

configurewebpack:])

]}

同時修改元件中axios讀取方法

loadjson()

).catch

(err =>

)}

再重啟哈專案

ok了其實新版的cli要配置就得在vue.config.js中進行了,還有很多改動,目前我用到的配置如下

完整的vue.config.js配置

let path =

require

('path'

)const copywebpackplugin =

require

('copy-webpack-plugin'

)// 這裡引入`這個copywebpackplugin`外掛程式

function

resolve

(dir)

let isproduction = process.env.

node_env

==='production'

module.exports =

, devserver:}}

,// 使用這個外掛程式 ,將src/assets/testgeojson.json拷貝到publi目錄下

configurewebpack:])]}}

執行和編譯時期資源載入的不同 vue

開發語言都有編譯和執行兩個階段,很多時候這個也會帶來許多bug 如 乙個專案在開發階段測試沒有問題,然上線發布後就會有這樣那樣的問題,譬如說的載入,靜態資料 js,css,json 讀取錯誤 接下來我們就使用vue的專案預設首頁面的img來測試 1 使用data掛載url 我們把這個image的sr...

自定義異常 執行時期和編譯時期的區別

1.自定義異常一 繼承runtmeexcepyion,即執行期間異常 由於我們自定義的是執行期間的異常,我們丟擲異常,程式始終不作處理,程式編譯的時候不會報錯,但是執行的時候會報錯,因此會中斷程式.2.自定義異常一 繼承excepyion,即編譯期間異常 跟上面相反,丟擲異常,必須要處理,不然不會通...

解釋執行和編譯執行的區別?

閱讀目錄 一 編譯器 二 機器碼 三 目標程式 四 net中的clr是什麼?五 解釋執行和編譯執行的區別?一 編譯器 編譯器是一種特殊的程式,它可以把以特定程式語言寫成的程式變為機器可以執行的機器碼。我們把乙個程式寫好,這時我們利用的環境是文字編輯器,這時我們把程式稱為源程式,在此以後程式設計師可以...