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

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

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

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.js的plugins下增加即可如

'use strict'

const copywebpackplugin =
require
('copy-webpack-plugin'
)// other configure
plugins:
[// other configure
// copy custom static assets
// copy custom static assets
newcopywebpackplugin([
,])// other configure
]

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

configurewebpack:])

]}

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是什麼?五 解釋執行和編譯執行的區別？一 編譯器 編譯器是一種特殊的程式，它可以把以特定程式語言寫成的程式變為機器可以執行的機器碼。我們把乙個程式寫好，這時我們利用的環境是文字編輯器，這時我們把程式稱為源程式，在此以後程式設計師可以...