Vue cli 资源文件的引用 原

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}

总结：关于在开发环境中的引用资源的路径，其实与我们普通开发一样，只需关注当前文件与资源文件的路径关系（每个模板文件就当做一个普通的html页面）

资源放置方法，通常是一些固定的资源（如第三方插件，像jQuery等）与图片放在根目录下的static文件夹中，自己可能修改（自己写的js或者css）的文件放在assets文件夹下。 引用jQuery简单的方法在index.html页面中通过script标签引入 <script src="static/js/jQuery-2.1.4.min.js"></script>

(adsbygoogle = window.adsbygoogle || []).push({});