Vue中引用路径的配置
VUE中引用路径的配置引用components目录下的子组件举例解决方法引用assets目录下的文件举例解决方法在vue项目开发中经常引用JS、CSS、IMG文件,当项目较大时文件层级很多,导致路径很长,我们可以通过在bulid > webpack.base.conf.js 设置简便的引用路径。引用components目录下的子组件举例在父组件中引入子组件:import HelloWorld
·
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="">
注意事项:设置好引用路径,必须要重启项目才能生效,不然会报错。
更多推荐
已为社区贡献12条内容
所有评论(0)