Vue之vue項目引入圖檔和設定路徑别名

1、在vue項目中引入圖檔，圖檔放在static/img檔案下，引用的時候這樣寫

<div class="img">
    <img src='static/img/face-1.jpg'>
</div>
//在static檔案夾下的靜态檔案加入時不需要從引用出網上找，如不需要這樣寫
//'..../static/img/face-1.jpg'
//而隻需要從static處開始寫就行
           

2、設定路徑别名

在vue項目中，有時會import一些元件，引入的檔案要這樣寫

這路徑有時候兩個點還好算一點，要是三個點四個點，着實讓人頭暈；

是以我們可以進行路徑别名的設定，比如隻要在src目錄下的，我們用@來代替

//在webpack.base.config.js中
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  }
           

那麼現在，隻要在src下的檔案都可以用@來開頭

如果我這樣設定：

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      'views': resolve('src/views'),
    }
  },
           

則說明所有在src/views檔案夾下的檔案的路徑都可以用view來開頭。