nuxt中让人迷惑的alias @与~

nuxt中让人迷惑的alias @与~

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 @与~