vue中靜態(tài)文件引用的注意事項(xiàng)及說(shuō)明

更新時(shí)間：2024年04月27日 12:05:12 作者：?jiǎn)h兒

這篇文章主要介紹了vue中靜態(tài)文件引用的注意事項(xiàng)及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

一、assets文件夾與static文件夾的區(qū)別

區(qū)別一：

assets文件是src下的，所以最后運(yùn)行時(shí)需要進(jìn)行打包，而static文件不需要打包就直接放在最終的文件中了

區(qū)別二：

assets中的文件在vue中的template/style下用../這種相對(duì)路徑的形式進(jìn)行引用，在script下必須用@import的方式引入
而static下的文件在.vue中的任何地方都只要使用../這種相對(duì)路徑的方式引入

總結(jié)一下：

1.assets用來(lái)放置樣式、靜態(tài)圖片，只要src下面的組件中用到的資源就放在assets中。
2.static用來(lái)放沒(méi)有npm包的第三方插件，字體文件。
3.assets與components同級(jí) components下的.vue引用靜態(tài)文件時(shí)，相對(duì)路徑為 ../assets/wapFront

4.assets與app.vue同級(jí) 相對(duì)路徑為 ./assets/wapFront

二、vue如何引入其它靜態(tài)文件

1.src目錄下的資源只能import或require。

2.想靜態(tài)引入的話，建立一個(gè)與src同級(jí)的目錄例如static，然后把靜態(tài)資源放入該文件夾下，html的引入路徑如下：./static/...

注：試過(guò)一定要放在static文件夾下，否則報(bào)錯(cuò)

三、vue如何引入sass

npm i sass --save-dev 裝下它

npm i sass-loader --save-dev 再裝下它

在webpack.base.config配置文件里加上這段

{
　　test: /\.scss$/,
　　loader: 'style!css!sass'
},

在組件文件.vue里直接引入scss樣式

<style lang="scss">
　　.hello input {
　　color: red;
}
</style>

四、vue報(bào)錯(cuò)cannot GET

1.你init vue-cli的時(shí)候,有個(gè)選項(xiàng)問(wèn)你是否需要eslint可以選擇不需要，因?yàn)樗菣z驗(yàn)的，可以不用，如果用它格式寫(xiě)的不規(guī)范啟不來(lái)頁(yè)面

2.如果已經(jīng)安裝eslint，將下圖所示部分注釋掉，eslint對(duì)空格要求比較嚴(yán)格

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue實(shí)現(xiàn)簡(jiǎn)單登錄界面
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單登錄界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-06-06
Vue+Flask實(shí)現(xiàn)圖片傳輸功能
這篇文章主要為大家詳細(xì)介紹了Vue+Flask實(shí)現(xiàn)圖片傳輸功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
vue使用數(shù)組splice方法失效,且總刪除最后一項(xiàng)的問(wèn)題及解決
這篇文章主要介紹了vue使用數(shù)組splice方法失效,且總刪除最后一項(xiàng)的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
淺談vue加載優(yōu)化策略
這篇文章主要介紹了淺談vue加載優(yōu)化策略，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-03-03
Vue拿到二進(jìn)制流圖片如何轉(zhuǎn)為正常圖片并顯示
這篇文章主要介紹了Vue拿到二進(jìn)制流圖片如何轉(zhuǎn)為正常圖片并顯示，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue通過(guò)v-show實(shí)現(xiàn)回到頂部top效果
這篇文章主要介紹了vue通過(guò)v-show實(shí)現(xiàn)回到頂部top效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-12-12
Vue 報(bào)錯(cuò)Error: No PostCSS Config foun
這篇文章主要介紹了Vue 報(bào)錯(cuò)Error: No PostCSS Config found問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
vue中關(guān)于computed的this指向問(wèn)題
這篇文章主要介紹了vue中關(guān)于computed的this指向問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
vue3實(shí)現(xiàn)密碼輸入框效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用vue3實(shí)現(xiàn)6位的密碼輸入框效果,文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-08-08
如何基于uniapp開(kāi)發(fā)android播放webrtc流詳解
這篇文章主要介紹了在uniapp中播放RTSP和WebRTC協(xié)議流的區(qū)別,以及如何封裝WebrtcVideo組件和音視頻實(shí)時(shí)通訊的實(shí)現(xiàn),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-02-02