基于webpack的vue项目路径别名

在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';

这样引用就一目了然。

巴特西

基于webpack的vue项目路径别名

最新文章

热门文章