image.png
我就说为啥写的对 可就是报错呢，直到我查到了webpack修改后必须重启
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'
image.png
