nuxt中的@和~让人很是迷惑,特别是针对assets和static两个目录的时候,今天一起来整理一下。
先看官方对alias的说明:
alias的默认值如下
{
'~~': `<rootDir>`,
'@@': `<rootDir>`,
'~': `<srcDir>`,
'@': `<srcDir>`,
'assets': `<srcDir>/assets`, // (unless you have set a custom `dir.assets`)
'static': `<srcDir>/static`, // (unless you have set a custom `dir.static`)
}
其中srcDir默认值是rootDir value, 即与rootDir值默认是一样的。
rootDir 默认值是 process.cwd() 也即项目的根目录。
假如我在assets目录中放一个stylus 公共样式文件
/assets/stylus/common.styl
vue文件中引用会出现下面的情况。
<style scoped lang="stylus">
// 这种引用没问题。
@require ('~/assets/stylus/common.styl');
// 这种也没有问题
@require ('~assets/stylus/common.styl');
// 这种提示错误 failed to locate @require file @assets/stylus/common.styl
@require ('@assets/stylus/common.styl');
// 这种也提示错误 failed to locate @require file @/assets/stylus/common.styl
@require ('@/assets/stylus/common.styl');
</style>
按上面配置的替换规则来说,@require ('@/assets/stylus/common.styl');
应该也是没问题的。
不懂很是让人莫名其妙的。
版权声明:本文为凸然网站的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:nuxt中让人迷惑的alias @与~