VueJS with Webpack: import and export do not work properly

Question

I started a new Vuetify / Webpack project and tried to implement vue-routerafter setting up the project through vue init vuetify/webpack.

I installed the router based on the instructions in this guide . After some involvement, I got it working by changing the way I import Vue components.

In my router/index.jsfile:

// works for me
import Main from '../components/Main.vue'

// does NOT work; from the tutorial
import Main from '@/components/Main'

My question is: why should I import my file Main.vuerelatively and include .vue extensionwhen importing?

---

My project structure:

-node_modules/
-public/
-src/
|-components/
||-Main.vue
|-router/
||-index.js
|-App.vue
|main.js
-index.html
-package.json
-webpack.config.js

My webpack.config.js file is:

var path = require('path')
var webpack = require('webpack')
 
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  resolve: {
    alias: {
      'public': path.resolve(__dirname, './public')
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          objectAssign: 'Object.assign'
        }
      },
      {
        test: /\.styl$/,
        loader: ['style-loader', 'css-loader', 'stylus-loader']
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

Run codeHide result

Answer 1

alias @. webpack .

, .vue, extensions resolve .

webpack.config.js @, src:

resolve: {
  extensions: ['', '.js', '.vue'],
  alias: {
    '@': path.resolve(__dirname, './src'),
    ...
  }
  ...
}

---

: @evetterdrake , vue-cli Vuetify resolve module, Webpack.

resolve .