VUE路徑問題

import：

html文件中，經過script標籤引入js文件。
而vue中，經過import xxx from xxx路徑的方式導入文件，不光能夠導入js文件。
「xxx」指的是爲導入的文件起一個名稱，不是指導入的文件的名稱，至關於變量名。
「xxx路徑」指的是文件的相對路徑.

src下有components,router文件夾和App.vue文件,components文件夾下游apple.vue和banana.vue,router文件夾下有index.js路由文件

在路由index.js中，導入apple.vue和banana.vue

import banana from '@/components/banana'
import apple from '../components/apple'

以上例子，經過兩種方式定義相對路徑，而且省略了文件的後綴名。

.方式

以父子目錄的方式定義相對路徑

./指當前目錄
../指當前目錄的上一層目錄

@方式

以根目錄的方式定義相對路徑
vue在webpack.base.conf.js文件中有以下配置

// 鏈接路徑並返回
function resolve(dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  resolve: {
    // 在導入語句沒帶文件後綴時，webpack會自動按照順序添加後綴名查找
    extensions: ['.js', '.vue', '.json'],
    // 配置別名
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      // 將項目根目錄中，src的路徑配置爲別名@
      '@': resolve('src'),
    }
  }
}