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

秒速五厘米 2022-10-30 01:25 67阅读 0赞

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

其包含了四种引用方式：

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

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

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

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

但我们正常使用的时候，可能会使用`~@`，其实如果是静态的图片地址，那么效果和单独使用`@`是一样的。  
![在这里插入图片描述][20210216204931824.png]  
如下：三种方式均可以被渲染出来  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]  
接下来试一下`~`的高级用法…

// 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’)，所以图片将会在上图和下图中随机切换。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70 1]

参考  
[vue-cli官方文档][vue-cli]

[20210216204931824.png]: /images/20221024/a770d2d571e44e6b9bac4538bc9e3241.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]: /images/20221024/7b69a65155254737a4fd4292edaa0b17.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70 1]: /images/20221024/f05640b0a41443f79aef9150750db436.png
[vue-cli]: https://cli.vuejs.org/zh/guide/html-and-static-assets.html#public-%E6%96%87%E4%BB%B6%E5%A4%B9