vue中靜態(tài)文件引用的注意事項及說明
更新時間：2024年04月27日 12:05:12 作者：唄兒
這篇文章主要介紹了vue中靜態(tài)文件引用的注意事項及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
一、assets文件夾與static文件夾的區(qū)別
區(qū)別一：
- assets文件是src下的，所以最后運行時需要進(jìn)行打包，而static文件不需要打包就直接放在最終的文件中了
區(qū)別二：
- assets中的文件在vue中的template/style下用../這種相對路徑的形式進(jìn)行引用，在script下必須用@import的方式引入
- 而static下的文件在.vue中的任何地方都只要使用../這種相對路徑的方式引入
總結(jié)一下：
- 1.assets用來放置樣式、靜態(tài)圖片，只要src下面的組件中用到的資源就放在assets中。
- 2.static用來放沒有npm包的第三方插件，字體文件。
- 3.assets與components同級 components下的.vue引用靜態(tài)文件時，相對路徑為 ../assets/wapFront
4.assets與app.vue同級 相對路徑為 ./assets/wapFront
二、vue如何引入其它靜態(tài)文件
1.src目錄下的資源只能import或require。
2.想靜態(tài)引入的話，建立一個與src同級的目錄例如static，然后把靜態(tài)資源放入該文件夾下，html的引入路徑如下：./static/...
注：試過一定要放在static文件夾下，否則報錯
三、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報錯cannot GET
1.你init vue-cli的時候,有個選項問你是否需要eslint可以選擇不需要，因為它是檢驗的，可以不用，如果用它格式寫的不規(guī)范啟不來頁面
2.如果已經(jīng)安裝eslint，將下圖所示部分注釋掉，eslint對空格要求比較嚴(yán)格
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)簡單登錄界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要為大家詳細(xì)介紹了Vue+Flask實現(xiàn)圖片傳輸功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue使用數(shù)組splice方法失效,且總刪除最后一項的問題及解決
這篇文章主要介紹了vue使用數(shù)組splice方法失效,且總刪除最后一項的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了淺談vue加載優(yōu)化策略，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
Vue拿到二進(jìn)制流圖片如何轉(zhuǎn)為正常圖片并顯示
這篇文章主要介紹了Vue拿到二進(jìn)制流圖片如何轉(zhuǎn)為正常圖片并顯示，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue通過v-show實現(xiàn)回到頂部top效果,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-12-12
Vue 報錯Error: No PostCSS Config foun
這篇文章主要介紹了Vue 報錯Error: No PostCSS Config found問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue中關(guān)于computed的this指向問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要為大家詳細(xì)介紹了如何利用vue3實現(xiàn)6位的密碼輸入框效果,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08
如何基于uniapp開發(fā)android播放webrtc流詳解
這篇文章主要介紹了在uniapp中播放RTSP和WebRTC協(xié)議流的區(qū)別,以及如何封裝WebrtcVideo組件和音視頻實時通訊的實現(xiàn),文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02