Vuevue的静态资源处理---vue项目路径使用的@和~的区别

在我们的项目结构里，有两个静态文件的路径，分别是：src/assets 和 static/。那这两个到底有什么区别呢？

Webpacked 资源

为了回答这个问题，我们首先需要理解webpack是怎样处理静态资源的。
在*.vue组件中，所有的templates和css都会被vue-html-loader和css-loader解析，寻找资源的URL。
举个例子，在<img src="https://blog.csdn.net/weixin_42960907/article/details/logo.png">和background: url(./logo.png)中的"./logo.png"，都是相对资源路径，都会被webpack解析成模块依赖 。

由于logo.png不是JavaScript，当被看成一个模块依赖的时候，我们需要使用url-loader 和file-loader进行处理。 该模板已经配置好了这些loaders，所以你能够使用相对/模块路径时不需要担心部署的问题。

由于这些资源可能在构建的时候被 内联 / 复制 / 重命名， 所以它们从本质上来说是你源码的一部分。
这就是为什么我们建议将交由webpack处理的静态资源和其它源文件一样放在/src路径下面。
实际上，你甚至不需要把它们全都放在/src/assets路径下：你可以基于 模块 / 组件 的使用来组织文件结构。
例如，你可以把每个组件和属于它的静态资源放在它自己的目录下。

资源处理规则

相对URL

例如 ./assets/logo.png将会被解释成一个模块依赖。它们会被一个基于你的webpack输出配置自动生成的URL替代。

没有前缀的URL

例如 assets/logo.png 将会被看成相对URL，并且转换成./assets/logo.png

前缀带~的URL

require('some-module/image.png')会被当成模块请求,如果你想要利用webpack的模块处理配置，就可以使用这个前缀~。
例如，如果你有一个对于assets的路径解析，你需要使用<img src="https://blog.csdn.net/weixin_42960907/article/details/~assets/logo.png">来确保解析是对应上的。

相对根目录的URL

例如 /assets/logo.png是不会被处理的.

实际问题

例如如下 css中使用background-image: url(~@/assets/images/system/university.svg);
webpack中的配置, @这是webpack设置的路径别名。

config.resolve.alias
            .set('@', resolve('src'))
            .set('components', resolve('src/components'));

~是 stylus-loader 的东西，参考 https://github.com/shama/stylus-loader（但是好像不引入这个库，也可以用~）

~是相对于其他路径（文件）的，类似于相对路径
示例：

~@/assets/scss/aaa.scss 表示相对于@（别名，一般是src目录）下的 assets/scss/aaa.scss；

<app-tree
      class="half"
      :treeConfig="treeConfig"
      :expandedKeys.sync="treeConfig.defaultExpandedKeys"
      :selectedKeys="treeConfig.defaultSelectedKeys"
      :checkedKeys.sync="treeConfig.defaultCheckedKeys"
      :tree-data="treeData"
      :onSearch="onSearch"
      :onSelect="onSelect"
      :onLoadData="onLoadData"
    >
   <template #title="{ node }">
     <div class="system-role-title">
       <div class="title-icon" :class="node.icon"></div>
       <div class="title-label">{{ node.label }}</div>
     </div>
   </template>
 </app-tree>

.system-role-title {
  display: flex;
  align-items: center;

  .title-icon {
    width: 0.16rem;
    height: 0.16rem;
    margin-right: 0.04rem;
    color: #848484;
    background-size: 100% 100%;

    &.fa-university {
      background-image: url(~@/assets/images/system/university.svg);
    }

    &.fa-user-circle-o {
      background-image: url(~@/assets/images/system/user.svg);
    }
  }
}

这篇好文章是转载于：学新通技术网