Vue设置路径别名

0 前言

在vue项目中，通常要引入许多的文件，在编写文件路径的时候非常麻烦，很多地方都是重复的路径前缀且容易出错。因此，设置有效的路径别名来简化路径是非常有用的，具体的方法如下：

./这是相对路径的意思，同级目录。
../上级目录。
@/这是webpack设置的路径别名。在build/webpack.base.conf这个文件里面设置了@具体指的是什么

1 具体实现

打开项目的build/webpack.base.conf.js文件，找到resolve→alias，如下：

alias: {
      // 创建文件的别名，方便添加路径
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'styles': resolve('src/assets/styles'),
    }

此时，组件中的styles实际上就是指src/assets/styles，有效的简化了路径，清晰明了。需要注意的是：在引入文件的时候，路径前面需要加上"~"。

@import '~styles/varibles.styl'

注意：在组件中，我们会引用一些静态文件，比如static下的文件，这时候就不能利用以上介绍的方法进行设置，而必须使用一般的路径方式进行引用。