***import：

html文件中，通過script標簽引入js文件。
而vue中，通過import xxx from xxx路徑的方式導入文件，不光可以導入js文件。

from前的：
“xxx”指的是為導入的文件起一個名稱，不是指導入的文件的名稱，相當于變量名。

from后的：

“xxx路徑”指的是文件的相對路徑.

例如：

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

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

或者在某個.vue文件中導入css

import '../assets/xxx.css'

當然導入css還可以在.vue文件里的?

<style>/*當然這個@和下面所說的代表src的@不是一回事，這個只是一種引入css的一種方式*/@import "../css/style.css"; </style>

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

***.方式
以父子目錄的方式定義相對路徑
. /指當前目錄
. ./指當前目錄的上一層目錄

***@方式
以根目錄的方式定義相對路徑
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'),}} }

?

轉載于:https://www.cnblogs.com/taohuaya/p/10651902.html

總結

以上是生活随笔為你收集整理的Vue 导入文件import、路径@和.的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。