Specify a root path for imports?

Question

I'm converting my ongoing Vue.js app over to use vue-cli/Webpack and imported modules Something I'm finding rather tedious at the moment is specifying the relative paths for imports accurately. E.g. import bus from '../../bus', import Cell from '../Cell'. Easy to make a mistake.

I'm assuming it must be straightforward enough to specify a base or root directory and specify absolute paths from that, but I can't see where one would do that. For example, in the standard vue-cli webpack setup, the code I'm working on is all in the 'src' directory, inside which I have 'components', 'mixins', etc. It would be handy if I could use import xxx from 'components/xxx', import yyy from 'components/a/yyy'. How would I do that?

Answer 1

With vue-cli, you put webpack settings in vue-config.js, in the same folder as package.json.

vue-config.js:

var path = require('path')
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        src: path.resolve(__dirname, 'src')
      }
    },
  }
}

This will allow you to do

import HelloWorld from 'src/components/HelloWorld.vue'

instead of

import HelloWorld from '../components/HelloWorld.vue'

See https://cli.vuejs.org/config/#vue-config-js for more info.

Answer 2

The solution is already in place, in fact, just not well-documented. In webpack.base.conf.js, there is this:

  resolve: {
    extensions: ['', '.js', '.vue', '.json'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components')
    }
  }

I've added my own alias, 'mixins': path.resolve(__dirname, '../src/mixins'). So I can now use e.g. import Field from 'mixins/Field', along with e.g. import ScrollableTable from 'components/ScrollableTable'.

Answer 3

I am using laravel and the laravel-mix package.

To make it work add this to your webpack.mix.js :

const path = require('path');

mix.webpackConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'resources/js')
    },
  },
});

Answer 4

You can use something like this:

import { routes } from '@/router/routes'

where /router folder is on the root of my project and I can import my routes anywhere :)

Note: I'm using VueJS 2.0