默認會有‘@’別名,指向src目錄,還可以添加自定義別名等等。
使用方法
使用別名一般就三種情況:在js中用,在css中用,在html文檔內用
js中用,最簡單:
import {getName} from '@/util/name'
css中使用,需要加入“~”,并且不要寫成字符串:
{background: url(~@/assets/img/04_2.jpg);background: url('~@/assets/img/04_2.jpg');//錯了,這里有個坑,不能寫成字符串,我就是因為這樣寫錯了
}
html中使用,可以加入‘~’也可以不加入‘~’。
<img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
生產包遇到路徑問題
相信你看到這里,也曾經無數次npm run build,在很多問題中就是因為路徑出現問題。
共享一個碰到的坑:
在config/index.js內可以設置打包后根目錄,例如:
build: {index: path.resolve(__dirname, '../dist/index.html'),assetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: '/foreEnd/',//設置資源訪問時前綴,當設置后,例如圖片,css,js等文件的路徑就會變為/foreEnd/……的絕對路徑,你可以設置為‘./’保持相對路徑。
圖片以及一些靜態資源盡量放入src/assets目錄內,不要放入static目錄內,訪問不易出錯。以@/assets/……方式訪問。
在寫路徑時候,盡量不要使用絕對路徑,請使用@別名方式訪問資源。
?
在js文件或者vue文件的script標簽中使用:
(1)、js文件中導入示例:
(2)、vue文件中導入示例:
css(scss)文件在scss或者vue的style標簽中導入示例:
(1)、在scss文件中導入示例:
(2)、在vue的style標簽中導入示例:
注意:css或者scss樣式導入需要使用?~@?開頭。
在vue的template模板標簽中引入圖片路徑示例(兩種方式均可使用):
(1)、使用?~@?方式引入:
(2)、使用?@?方式引入:
(3)、在scss 自定義方法中使用時必須使用 ~@ 方式引入: