波浪号~@在vue项目中的作用，以及静态资源引用的几种方式

在vue单文件组件中，有一套自己的处理静态资源路径的逻辑。

其包含了四种引用方式：

• 绝对路径
• 相对路径
• ~开头的模块
• @开头的模块

~开头的引用并非一个别名，而是可以将~后边的内容当做一个模块请求被解析，所以其后边甚至可以放一个node模块，进而实现更高级的功能（见下文），实现这一功能的是vue-loader，在vue-cli项目中已经内置了。

@则是一个真正的别名，可以通过vue inspect命令查看当前webpack的配置：

# 以下可以看到 @ 是一个别名
 alias: {
    '@': 'D:\\projects\\test-vue\\src',
    vue$: 'vue/dist/vue.runtime.esm.js'
 },

但我们正常使用的时候，可能会使用~@，其实如果是静态的图片地址，那么效果和单独使用@是一样的。

如下：三种方式均可以被渲染出来

接下来试一下~的高级用法…

// foo.js 它是一个js的模块
const getImg = () => {
  if (Math.random() > 0.5) {
    return require("./assets/logo.png");
  } else {
    return require("./assets/csdn.png");
  }
};
module.exports = getImg();

// App.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <img alt="Vue logo" src="@/assets/logo.png" />
    <img alt="Vue logo" src="~@/foo" />
  </div>
</template>

代码中~@/foo 其实是等同于require(’@/foo’)，所以图片将会在上图和下图中随机切换。

参考
vue-cli官方文档