vue 中路径选择 @ 和~

两者都与webpack中的resolve.alias中的配置

官方文档 链接

@详解

@是属于resolve.alias的配置

 alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }

• 就相当于设置了一个别名，为了让后续引用的地方减少路径的复杂度

// 例如
src 
 - componets 
    - a.vue
 - router
    - home 
        - index.vue

index.vue里，正常引用A组件

import A from '../../components/a.vue'

当设置了alias后

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
    }
},

引用的地方路径就变成这样

import A from '@/components/a.vue'

这里的@ 就起到了 resolve('src') 路径的作用

官方提供的代码 

module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/')
    }
  }
};

现在，替换「在导入时使用相对路径」这种方式，就像这样：

import Utility from '../../utilities/utility';

你可以这样使用别名：

import Utility from 'Utilities/utility';

在vue-cli3中,已经配置好了@ 就是 src下的路径,具体配置的地址为/node_modules/@vue/cli-service/lib/config/base.js

webpackConfig.resolve
      .extensions
        .merge(['.mjs', '.js', '.jsx', '.vue', '.json', '.wasm'])
        .end()
      .modules
        .add('node_modules')
        .add(api.resolve('node_modules'))
        .add(resolveLocal('node_modules'))
        .end()
      .alias
        .set('@', api.resolve('src'))
        .set(
          'vue$',
          options.runtimeCompiler
            ? 'vue/dist/vue.esm.js'
            : 'vue/dist/vue.runtime.esm.js'
        )

~详解

在alias中配置common别名

 resolve: {
        extensions: ['.js', '.vue'],
        alias: {
            'vue': 'vue/dist/vue.esm.js',
            'common': resolve('src/common'),
            'config': resolve('src/config'),
            'views': resolve('src/views')
        }
    }
    
    引用scss的代码
    
    <style scoped lang="scss">
     @import "~common/sass/variables";
     @import "~common/sass/mixin";
     /* ... */
   </style>
   
~common 表示相对 common，然后我们在 webpack 配置了 common 的 alias，就能找到了它的路径了

在使用stylus的时候 ~ 是 stylus-loader中的东西，含义相同，就是相对于后面模块的路径