vue文件路径引用简写
当我们需要引用被多级文件夹嵌套的文件时,需要用到很多../../
,使得引用路径看起来非常繁琐,这时我们可以采用简写模式
-
在
build
文件夹中找到webpack.base.conf.js
,在找到resolve:{}
对象resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } },
-
其中
@
就代表了src
这个文件夹,我们可以根据需求在自定义其他文件夹的简写形式- 比较常见的
assets
、components
文件夹,以及自定义的常用的views
resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'assets': resolve('src/assets'), 'components': resolve('src/components'), 'views': resolve('src/views') } },
- 比较常见的
-
示例:
- 参考下图文件目录结构
// 使用import引入组件时 // 1. 原来 import TabBar from "./components/tabbar/TabBar" // 2. 简写 import TabBar from "components/tabbar/TabBar"
<!-- 不是通过import引入时,比如通过src --> <!-- 1.原来 --> <img slot="item-icon" src="../../assets/img/home_page.svg" alt=""> <!-- 2.简写 --> <img slot="item-icon" src="~assets/img/home_page.svg" alt="">
- 对
webpack.base.conf.js
文件进行修改后,要重新启动项目npm run dev
- 通过
import
和非import
引入的区别:后者需要在前面加上~
- 参考下图文件目录结构