Nuxt.js を IntelliJ から利用した際に、 `@` や `~` alias を解決してくれない対処

Nuxt.js を公式サイト通りにセットアップ後にIntelliJで起動した場合、 以下のようなComponentなどで利用する ~ や @ へ Cmd+Click で直接飛ぶことが出来なくて不便だった。

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

環境

"nuxt": "^2.0.0",

対処方法

nuxt.config.js へ以下を書き足し、 IntelliJ側の Webpack configuration を変更することで解決した。

nuxt.config.js

// 追加
const path = require('path');

module.exports = {
  ...
  // 追加
  resolve: {
    extensions: ['.js', '.json', '.vue', '.ts'],
    root: path.resolve(__dirname),
    alias: {
      '@': path.resolve(__dirname),
      '~': path.resolve(__dirname),
    },
  },
}

Preference -> Languages & Frameworks -> webpack -> webpack configuration file

旧

/Users/xxxx/project/webpack.config.js

↓

新

/Users/xxxx/project/nuxt.config.js

Nuxtjs♡IntelliJ