【记录】vue项目中@import 后面的波浪号~ 代表什么意思

╰半橙微兮° 2023-07-19 12:11 2阅读 0赞

在使用[vue-element-admin][]框架的时候，发现原来导入样式也可以这也写！写法挺高级的，就此记录下~

![在这里插入图片描述][20200330221316478.png]  
由于是在webstorm中编写的项目，编辑器好像不识别这种写法，所以一直报错。

这种写法其实是webpack中的一个配置。这里用`~`符号,表示后面的值为 alias, 然后就会去`vue.config.js`的 `alias` 配置中找相应的值。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70]  
然后拼接成最后的地址：

'src/styles/mixin.scss'
    'src/styles/variables.scss'

**注意：**  
我们必须加上 `~`符号，否则我们可能会因为找不到而报错。

当然，我们也可以在`vue.config.js`中添加其它的 alias 配置自定义字符`a`

resolve: { 
          alias: { 
            '@': resolve('src'),
            'a':resolve('src/styles')
          }
        }

然后我们可以在其它组件中进行使用

@import '~a/sidebar.scss'

相当于：

'src/styles/sidebar.scss'

--------------------

相关文章链接：  
[https://www.webpackjs.com/configuration/resolve/\#resolve-alias][https_www.webpackjs.com_configuration_resolve_resolve-alias]  
[https://cli.vuejs.org/zh/config/\#integrity][https_cli.vuejs.org_zh_config_integrity]

--------------------

如果您也正在学习前端的路上，记得关注该博主，学习更多关于前端的知识~

[博主主页 Poetic Code][Poetic Code]

[vue-element-admin]: https://github.com/PanJiaChen/vue-element-admin
[20200330221316478.png]: /images/20230528/7920210506c049e08fb260b27e0fbc0f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg_size_16_color_FFFFFF_t_70]: /images/20230528/b00a5e0a170b4cbabb66527a8158c802.png
[https_www.webpackjs.com_configuration_resolve_resolve-alias]: https://www.webpackjs.com/configuration/resolve/#resolve-alias
[https_cli.vuejs.org_zh_config_integrity]: https://cli.vuejs.org/zh/config/#integrity
[Poetic Code]: https://blog.csdn.net/weixin_44253336