在vue的项目里,我们可以使用../这样的相对路径的方式引用不同目录的组件:
import userinfo from '../../../components/userinfo.vue';
使用../引用的路径比较深,定位路径和书写不方便,并且不直观。
由于项目是基于webpack,比较好的做法是使用webpack对路径定义一个别名。
在webpack.base.config.js找到resolve节点,配置别名如下:
resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), '@components': path.resolve(__dirname, '../src/components') } },
不同组件之间引用,如上面的示例:
import userinfo from '@components/userinfo.vue';
这样引用就一目了然。