Vue.js 배포 후 js 파일을 읽지 못함(빈 화면) - History, Hash

 

 

Vue.js 를 배포하면서 문제가 생겼다.

 

로컬에서는 잘 작동하던 페이지가

 

배포된 환경에서는 빈(하얀)화면을 송출하는 것이다.

 

그래서 이게 왜 이럴까 열심히 찾아보니

 

배포된 환경에서 읽어와야 하는 파일의 경로가 제대로 되어 있지 않다는 것을 발견할 수 있었다.

 

이유는

 

Vue Router를 사용할 때 "History"로 세팅을 했는데

 

그럴경우 서버가 모든 경로 요청을 "index.html"로 리다이렉트하도록 설정해야합니다.

 

"Nginx"를 사용하는 경우

 

"nginx.conf" 에서

 

server {
  listen 80;
  server_name example.com;

  location / {
    root /path/to/your/app;
    try_files $uri $uri/ /index.html;
  }
}

 

"Apache"의 경우

 

".htaccess" 에서

 

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

 

이런식으로 설정을 해주어야 합니다.

 

 

아니면 "Hash"를 사용하면 되는데

 

그럴 경우

 

index.js에서

import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
    history: createWebHashHistory(process.env.BASE_URL),
    routes
});

 

이렇게 Hash를 세팅해주고

 

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : './'
  //publicPath: process.env.NODE_ENV === 'production' ? '/이곳에 경로를 적으시오./' : '/'
};

 

경로를 설정해주면 된다.

 

본인이 직접 파일의 경로를 지정할 수도 있고

 

그게 귀찮으면 "./"를 통해 처리할 수 있다.