五-2、vue中引用文件路径问题

本文介绍: vue中引用文件路径问题，vue中给div 设置 style

vue 路径 分为：

绝对路径、相对路径、~+路径及别名+路径

绝对路径：

（1）放在public 文件夹下的内容，不会经过webpack 打包处理，可以直接引用，

比如：a a.png直接放在public 文件夹下，不管在哪个文件里，都可以这么引用

（2）通过别名引用

在js中，引入带别名的文件路径，不需要在别名前加~ ，在css或者style中引入的需要在路径前面加~，路径以 ~ 开头，其后的部分将会被看作模块依赖。这意味着你可以用该特性来引用一个 No de 依赖中的资源，~相当于req iure。

在vue.config.js中定义了别名

chainWe b pack: (config) => {

config.resolve.alias

.set(‘@’, resolve(‘src‘)) //本项目路径src路径设置别名为@

.set(‘_conf‘, res olv e(‘src/config‘)) //本项目路径src/config路径设置别名为_conf

.set(‘_iconfont‘, res olve(‘src/assets/icon s/icon font‘))

.set(‘_css‘, res olve(‘src/assets/css/’))

.set(‘_img‘, res olve(‘src/assets/img/’))

.set(‘_js‘, res olve(‘s rc/assets/js/’))

.set(‘_components‘, res olve(‘src/components‘))

.set(‘_header‘, ‘src/Hea de r‘)

.set(‘_footer‘, ‘src/Footer‘)

}

在vue中引入 js文件和css文件

注意在script中路径前面都没有~

<script>

import index fro m “_js/index.js“; ==src/assets/js/index.js

import “swiper/swiper.min.css“; ==node_modules/swiper/swiper.min.css

import “_js/vendor/sw i per/sw i per.m in.css“; ==src/assets/js/vendor/swi per/swi per.m in.css

</script>

注意style中使用别名的路径前面需要加~

<style scoped>

@import url(~_css/index.css); ==src/assets/css/index.css

</style>

相对路径：

引入相对路径，路径前面需要加require

在src/view/home/index.vue中引入src/assets/img/icon-cloud-light.png 

正确写法：
<img  src="require(../../assets/img/icon-cloud-light.png)" />

错误写法：
<img src="../../assets/img/icon-cloud-light.png" />

原因：除了public文件夹下的内容，其余内容都会经过webpack处理，路径就变了，所以需要用require处理一下路径

~+路径及别名+路径

以下示例，通过别名引入文件

通过别名设置div的背景图片

用reqiure，这样写可以
<div    class="thumbnail"
        v-bind:style=
"{backgroundImage:'url(' +require('_img/index/service-special-zone-bg-01.png') +')',}"
   >

用~，这样写不行：
<div     class="thumbnail"
         v-bind:style=
"{backgroundImage:'url(~_img/index/service-special-zone-bg-01.png)',}"
>

给div设置style样式，设置背景图片等属性

<div
        class="featurette"
        :style="[
          {
            background:
              'url(' +
              require('_img/index/service-rate-bg.png') +
              ' )  bottom center no-repeat',
          },
          {
            'background-size': 'auto 100%',
          },
          {
            'margin-bottom': '50px',
          },
        ]"
      >

</div>

通过别名引入图片
<img src="~_img/index/icon-cloud-light.png" alt="" />

通过别名引入css

<style scoped>
 @import url("~_css/index.css"); 
</style>

通过别名引入js

<script>

import index from "_js/index.js";
import Swiper from "swiper";
import "swiper/swiper.min.css"; //后跟的是swiper.css的相对路
import "_js/vendor/swiper/swiper.min.css";

</script>