@符号在vue路径中的作用和自定义设置

@符号在vue路径中直指src文件夹，这是构建项目时默认设置好的。具体设置如下：
build/webpack.base.conf.js

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

如果需要自定义修改styles文件夹为直接路径，方法如下：

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

使用方法：
@import '~styles/varibles.styl'
文件目录如下，如有不同可自行修改。修改webpack配置后，一定要记得重启服务，避免报错。

image.png