1、假如我们把所有的资源文件都放到assets文件夹下,
assets下含有image , js ,css3个文件, 分别放各个资源文件
1-1 App.vue 模板页面
作为图片:<img src="./assets/image/logo1.jpg"> assets前面必须加./
作为背景:.titlebg{background:url(./assets/image/logo.png) no-repeat} 或者titlebg{background:url(assets/image/logo.png) no-repeat}
1-2 其它模板页面
其它的页面都是按照正常的引用,每个模板看做单独的页面,按我们正常路径引用
如components->footer.vue 作为图片:<img src="../assets/image/logo.png" alt=""> 作为背景:.bgpic{background:url(../assets/image/logo.png) no-repeat} 如page->index->index.vue 作为图片:<img class="img" src="../../assets/image/logo.png" alt=""> 作为背景:.link{background:url(../../assets/image/logo.png) no-repeat;} 假如样式是外链样式放到assets->css->public.css .article_list{background:url(../../assets/image/logo.png) no-repeat}2、另一种情况在根目录下的static文件夹放置image ,js(一般第三方类库)文件夹
2-1 App.vue模板页面
作为图片:<img src="static/image/logo.jpg" alt=""> 或者<img src="../static/image/logo.png" >
作为背景:.titlebg{background:url(../static/image/logo.png) no-repeat}2-2其它模板页面
如page->index->index.vue
作为图片:<img class="img" src="../../../static/image/logo.png" alt=""> 作为背景:.link{background:url(../../../static/image/logo.png) no-repeat;} components->footer.vue 作为图片:<img src="../../static/image/logo.png" alt=""> 作为背景:.bgpic{background:url(../../static/image/logo.png) no-repeat}assets->css->public.css
.article_list{background:url(../../../static/image/logo.png) no-repeat}