文件路徑的引用問題（配置文件路徑vue.config.js）

在項目根目錄下創建vue.config.js文件

 vue.config.js內容：

const path = require('path');//引入path模塊
function resolve(dir){
    return path.join(__dirname,dir)//path.join(__dirname)設置絕對路徑
}

module.exports={
   
    chainWebpack:(config)=>{
        config.resolve.alias
        //set第一個參數：設置的別名，第二個參數：設置的路徑
        .set('@',resolve('./src'))
        .set('components',resolve('./src/components'))
        .set('assets',resolve('./src/assets'))
        .set('views',resolve('./src/views'))
        .set('network',resolve('./src/network'))
        //注意 store 和 router 沒必要配置
　　　　
    }
}

配置好想用的路徑別名后，重新啟動項目，再引入文件時，使用別名即可。

---

配置路徑前：

import my from "../views/my/My.vue";

配置路徑后(不用再擔心文件層級關系)：

import my from "views/my/My.vue";

注意，引用別名時如果是HTML中的路徑，則需要在別名前面加符號~

<img src="~assets/img/tabbar/home.svg" alt="" slot="item-icon">

 

---

圖片路徑的引用問題：

1、循環遍歷本地圖片，渲染不出來。

解決辦法：require加載,require加載圖片時可以使用相對地址。

 2、動態拼接地址，使用本地的圖片不顯示

 <img :src="require('assets/images/logo'+num+'.png')" alt="">

總結：動態添加的src被當做靜態資源處理了，沒有進行編譯，所以要加上require。