• webpack,vue中定义的别名怎么在模板, css sass less的图片地址上使用


    webpack 的别名好处大家也都了解, 但是 vue 的模板中, 对图片地址使用别名时总出现问题, 很久时间的时间都没找到解决办法, 一度认为是 webpack 的原因...

    alias: {
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components')
    }
    <template>
      <img src="assets/images/logo.jpg" />
    </template>
    <script>
    import 'assets/css/style.css'
    </script>
    <style>
    .logo {
      background: url(asset/images/bg.jpg)
    }
    </style>

    上面的代码, 你会发现只有引入style.css是成功的, 图片地址和背景图片地址都会解析失败...

     最终还是找到原因了...
    vue-html-loader and css-loader translates non-root URLs to relative paths. In order to treat it like a module path, prefix it with ~
    就是要在别名前面加一个~

    最终代码写成:

    alias: {
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components')
    }
    <template>
        <img src="~assets/images/logo.jpg" />
    </template>
    <script>
    import 'assets/css/style.css'
    </script>
    <style>
    .logo {
        background: url(~asset/images/bg.jpg)
    }
    </style>

    意思就是: 告诉加载器它是一个模块,而不是相对路径
    注意: 只有在template中的静态文件地址和style中的静态文件地址需要加~, 在script里的, 别名定义成什么就写什么.
    简单吧, 然而没找到原因前, 你压根就没办法...
    到此, 纠结了几个月时间的问题, 终于解决了...

  • 相关阅读:
    JDK 和 OpenJDK 的区别
    IntelliJ IDEA 使用 Git 并将 GitHub 作为远程代码仓库
    SQL 常用语法记录整理
    SpringBoot SpringApplication底层源码分析与自动装配
    一步步从Spring Framework装配掌握SpringBoot自动装配
    SpringBoot系列教程起步
    Redis高级进阶
    Redis构建文章聚合信息分类网站
    Redis快速起步及Redis常用命令大全
    Redis构建处理海量数据的大型购物网站
  • 原文地址:https://www.cnblogs.com/chengfeng6/p/8109280.html
Copyright © 2020-2023  润新知