vue中路径别名的使用

vue中路径别名的使用

在vue项目中，我们通常需要引入很多文件，但是在编写文件路径的时候很是麻烦，很多地方都是重复的路径前缀且容易出错。这个时候我们可以通过定义别名在简化路径，具体的方法如下：

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

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

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

@import '~styles/varibles.styl'