Vue中引用路径的配置

在vue项目开发中经常引用JS、CSS、IMG文件，当项目较大时文件层级很多，导致路径很长，我们可以通过在bulid > webpack.base.conf.js 设置简便的引用路径。

引用components目录下的子组件

举例

在父组件中引入子组件：

import HelloWorldSon from '../components/HelloWorldSon'
import HelloGetter from '../components/getters/HelloGetter'
import HelloMutation from '../components/mutations/HelloMutation'
import HelloAction from '../components/actions/HelloAction'

解决方法

在webpack.base.conf.js 中给src设置引用路径 ：

使用设置好的引用路径@：

import HelloWorldSon from '@/components/HelloWorldSon'
import HelloGetter from '@/components/HelloGetter'
import HelloMutation from '@/components/HelloMutation'
import HelloAction from '@/components/HelloAction'

引用assets目录下的文件

举例

在src > components > content > Content.vue 中引用src > assets > img > arrow.png

<img src="../../assets/img/arrow.png" alt="">

解决方法

在webpack.base.conf.js 中给src/assets设置引用路径 assets：

使用设置好的引用路径~assets：

<img src="~assets/img/arrow.png" alt="">

注意事项：设置好引用路径，必须要重启项目才能生效，不然会报错。