前端开发框架vue学习第三篇—— vue中的资源路径处理

版权声明:转载请注明原文链接,原创不易,谢谢合作! https://blog.csdn.net/dazhong2012/article/details/81938512

默认情况下,vue-loader 使用 css-loader 和 Vue 模版编译器自动处理样式和模版文件。在编译过程中,所有的资源路径例如 <img src="...">background: url(...)@import 会作为模块依赖。
例如,

1.url(./image.png) 会被转换为require('./image.png')
2. <img src="../image.png"> 将会编译为:
createElement('img', { attrs: { src: require('../image.png') }})

编译规则

  • 如果路径是绝对路径,会原样保留。
  • 如果路径以. 开头,将会被看作相对的模块依赖,并按照你的本地文件系统上的目录结构进行解析,./ 当前目录../ 父级目录/ 根目录
    <img src="./assets/logo.png">

  • 如果路径以 ~ 开头,其后的部分将会被看作模块依赖。可以用该特性来引用一个 node 依赖中的资源:`
    <img src="~some-npm-package/vue.png">

  • 如果路径以@ 开头,也会被看作模块依赖。所有 vue-cli 创建的项目都默认配置了将 @ 指向 /src。例如
    import First from '@/components/First'
    这里写图片描述

    参考链接:
    https://vue-loader-v14.vuejs.org/zh-cn/configurations/asset-url.html

展开阅读全文

没有更多推荐了,返回首页