intellij IDEAでvue-cli3のコード補完を有効にする方法

概要

intellij IDEAでvue-cli3ベースの開発をしている際にエイリアス(@)を用いたimport文のコード補完がうまく行かなかったのでその対処法を書いておきます。

Home.vue

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue' // <-ここで補完を有効にしたい

export default {
  name: 'home',
  components: {
    HelloWorld
  }
}
</script>

解決方法

1. 下記設定画面を開く
   
   Preferences -> Languages & Frameworks -> JavaScript -> Webpack

2. webpack configuration file:に下記をセットする
   
   {プロジェクトパス}/node_modules/@vue/cli-service/webpack.config.js

以上です。
誰かの参考になれば幸いです。