vue中引用文件路徑問題小結

更新時間：2023年12月14日 15:35:59 作者：楊揚樹

vue路徑分為絕對路徑、相對路徑、~+路徑?及?別名+路徑,在js中,引入帶別名的文件路徑,不需要在別名前加~?,在css或者style中引入的需要在路徑前面加~,路徑以?~?開頭,其后的部分將會被看作模塊依賴,本文給大家介紹vue中引用文件路徑問題,感興趣的朋友一起看看吧

vue路徑分為：

絕對路徑、相對路徑、~+路徑及別名+路徑

絕對路徑：

（1）放在public文件夾下的內容，不會經(jīng)過webpack打包處理，可以直接引用，

比如：aa.png直接放在public文件夾下，不管在哪個文件里，都可以這么引用

<img src="aa.png" style="width: 200px; height: 200px" />

（2）通過別名引用

在js中，引入帶別名的文件路徑，不需要在別名前加~ ，在css或者style中引入的需要在路徑前面加~，路徑以 ~ 開頭，其后的部分將會被看作模塊依賴。這意味著你可以用該特性來引用一個 Node 依賴中的資源，~相當于reqiure。

在vue.config.js中定義了別名
    chainWebpack: (config) => {
        config.resolve.alias
            .set('@', resolve('src'))  //本項目路徑src路徑設置別名為@
            .set('_conf', resolve('src/config')) //本項目路徑src/config路徑設置別名為_conf
            .set('_iconfont', resolve('src/assets/icons/iconfont'))
            .set('_css', resolve('src/assets/css/'))
            .set('_img', resolve('src/assets/img/'))
            .set('_js', resolve('src/assets/js/'))
            .set('_components', resolve('src/components'))
            .set('_header', 'src/Header')
            .set('_footer', 'src/Footer')
    }
在vue中引入js文件和css文件
注意在script中路徑前面都沒有~
<script>
import index from "_js/index.js";                 ==src/assets/js/index.js
import "swiper/swiper.min.css";                   ==node_modules/swiper/swiper.min.css
import "_js/vendor/swiper/swiper.min.css";  ==src/assets/js/vendor/swiper/swiper.min.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文件夾下的內容，其余內容都會經(jīng)過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>

到此這篇關于vue中引用文件路徑問題的文章就介紹到這了,更多相關vue引用文件路徑內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: