import Hello from '@/components/Hello';
import Hello from './components/Hello';
上面語句中的@
和.
的區別:
./
這是相對路徑的意思。@/
這是webpack
設置的路徑別名。
@是webpack配置的引用路徑,resolve裏面有一個alias的配置項目,
能夠讓開發者指定一些模塊的引用路徑。對一些經常要被import或者require的庫,
我們最好可以直接指定它們的位置,這樣方便我們查找。
'./'表示同目錄文件引用
如果正好此時你的頁面所在位置就是vue-cli配置的src目錄,
那這兩個代碼的文件路徑是一致的,但注意大多數實際情況它倆是不一致的。
這東西在vue
標準模板裏面的build/webpack.base.conf
這個文件裏面。
resolve: {
// 路徑別名
alias: {
'@': resolve('src'),
'vue$': 'vue/dist/vue.esm.js'
}
},
這個配置的具體講解在這裏:resolve.alias