vue中靜態(tài)文件引用的注意事項(xiàng)及說(shuō)明
一、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è)參考，也希望大家多多支持腳本之家。
- vue項(xiàng)目設(shè)置打包后的靜態(tài)文件訪問(wèn)路徑
- vue部署后靜態(tài)文件加載404的解決
- Vue讀取本地靜態(tài)文件json的2種方法以及優(yōu)缺點(diǎn)
- Vue3.0靜態(tài)文件存放路徑與引用方式
- Vue 打包的靜態(tài)文件不能直接運(yùn)行的原因及解決辦法
- vue@cli3項(xiàng)目模板怎么使用public目錄下的靜態(tài)文件
- 如何配置vue.config.js 處理static文件夾下的靜態(tài)文件
- Vue項(xiàng)目設(shè)置多個(gè)靜態(tài)文件及自定義靜態(tài)文件目錄的方案詳解
相關(guān)文章
vue中使用better-scroll實(shí)現(xiàn)滑動(dòng)效果及注意事項(xiàng)
這篇文章主要介紹了vue中使用better-scroll實(shí)現(xiàn)滑動(dòng)效果，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
Element-ui中元素滾動(dòng)時(shí)el-option超出元素區(qū)域的問(wèn)題
這篇文章主要介紹了Element-ui中元素滾動(dòng)時(shí)el-option超出元素區(qū)域的問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
如何啟動(dòng)一個(gè)Vue.js項(xiàng)目
這篇文章主要介紹了如何啟動(dòng)一個(gè)Vue.js項(xiàng)目，對(duì)Vue.js感興趣的同學(xué)，可以參考下2021-04-04
Vue生成隨機(jī)卡密并綁定到表單輸入框的實(shí)現(xiàn)技巧
在現(xiàn)代Web應(yīng)用中,隨機(jī)生成驗(yàn)證碼、卡密等是一項(xiàng)常見(jiàn)需求,對(duì)于開(kāi)發(fā)人員來(lái)說(shuō),如何在表單中快速生成一個(gè)符合格式的隨機(jī)卡密,并與其他表單字段一同提交,是一個(gè)常見(jiàn)的場(chǎng)景,本篇文章將詳細(xì)介紹如何在Vue.js框架中實(shí)現(xiàn)一個(gè)隨機(jī)卡密生成功能,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了vue遮罩層如何阻止?jié)L動(dòng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
如何解決this.$refs.form.validate()不執(zhí)行的問(wèn)題
這篇文章主要介紹了如何解決this.$refs.form.validate()不執(zhí)行的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
這篇文章主要介紹了vue中appear的用法,需要的朋友可以參考下2017-08-08
文章介紹了如何去掉Element UI中el-table組件自帶的邊框線,通常情況下,el-table沒(méi)有添加border屬性,但仍然會(huì)出現(xiàn)邊框線,可能的原因包括ElementUI的默認(rèn)樣式或表格的某些內(nèi)置樣式,感興趣的朋友跟隨小編一起看看吧2025-01-01
這篇文章主要介紹了Vue前端對(duì)axios的封裝和使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
element 穿梭框性能優(yōu)化的實(shí)現(xiàn)
本文主要介紹了element 穿梭框性能優(yōu)化，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10