vue引入静态资源的区别
(一)assets文件夾與static文件夾的區(qū)別
區(qū)別一:assets文件是src下的,所以最后運(yùn)行時需要進(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)格
轉(zhuǎn)載于:https://www.cnblogs.com/qcl-524077/articles/9233607.html
總結(jié)
以上是生活随笔為你收集整理的vue引入静态资源的区别的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: ACM--圆的摆线公式--湘大oj 10
- 下一篇: 整理中药的一些效果