[Vue.js] Module not found: Error: Can't resolve...

Vue-cli를 설치 후, 테스트할 겸 간단하게 페이지를 작성하고 빌드를 해보았다. 그리고 다음과 같은 에러가 났다...

default@joonas-ubuntu:~/express-vuejs/frontend
$ npm run build

> frontend@1.0.0 build /home/default/express-vuejs/frontend
> node build/build.js

Hash: cedc7ad1a63fb20beeff
Version: webpack 3.12.0
Time: 4256ms
                                                  Asset       Size  Chunks             Chunk Names
               static/js/vendor.3fae27b6d0a0572472a3.js     126 kB       0  [emitted]  vendor
                  static/js/app.076f945ac50b5f85ae7c.js    9.72 kB       1  [emitted]  app
             static/js/manifest.2ae2e69a05c33dfc65f8.js  857 bytes       2  [emitted]  manifest
    static/css/app.86a4513a3e04c0dcb73e6d6aea4580e4.css  237 bytes       1  [emitted]  app
static/css/app.86a4513a3e04c0dcb73e6d6aea4580e4.css.map  459 bytes          [emitted]  
           static/js/vendor.3fae27b6d0a0572472a3.js.map     620 kB       0  [emitted]  vendor
              static/js/app.076f945ac50b5f85ae7c.js.map    13.5 kB       1  [emitted]  app
         static/js/manifest.2ae2e69a05c33dfc65f8.js.map    4.97 kB       2  [emitted]  manifest
                                             index.html  510 bytes          [emitted]  

ERROR in ./src/router/index.js
Module not found: Error: Can't resolve 'components/IndexPage' in '/home/default/express-vuejs/frontend/src/router'
 @ ./src/router/index.js 4:0-41
 @ ./src/main.js

  Build failed with errors.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! frontend@1.0.0 build: ｀node build/build.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the frontend@1.0.0 build script.npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

여기서 사용된 패키지들의 버전은 vue@2.5.2, vue-router@3.0.1, webpack@3.6.0 이다.

다음과 같이 수정해서 해결했다. (주석 표시된 부분이 오류가 나던 코드 라인)

그런데 이상하다. 주석 표시된 코드는 다른 버전(vue@2.4.4, vue-router@2.7.0, webpack@2.2.1)에서는 잘 동작했다. 버전이 문제인가 싶어서 에러가 나던 상황과 최대한 비슷하게 버전을 맞춰봐도 같은 오류가 나오지는 않는다.

그러던 중 build/webpack.base.conf.js 라는 설정 파일 하나를 발견했다.

위는 낮은 버전이고, 아래는 상대적으로 높은 버전이었다. webpack 패키지가 2.2.1과 3.6.0 으로 메이저 버전이 다르다는 정도?

34번 줄을 보면 @ 심볼이 src 디렉토리로 resolve 되어있는 것을 알 수 있다.
@/components 처럼 앞에 @의 유무로 빌드 오류가 나거나 안 나는 이유가 이 설정파일의 차이에 있었다.

빌드 환경 설정을 잘 확인하자.