반응형
Vue가 localhost에서는 되는데 상용서버에 올리면 안되는 이유
Vue 화면이 안보이는 이유는 Vue를 Github pages 같은 곳에서 사용할때에 Javascript를 담고 있는 assets 경로가 절대 경로를 사용하지 못하기 때문이다.
즉, local에서는 address 바로 밑에 /assets이 존재하지만, 상식적으로 github pages나 다른 hosting 서비스에서는 다수의 사용자들에게 서비스를 제공하기 때문에 중간에 여러 라우팅 경로가 있기 때문이다.
말로 설명하면 다소 어려울 수 있으나 아래의 화면을 보면 바로 이해될 것이다.
cd dist
vi index.html
1. 수정 전: 화면이 안보이는 문제 코드
assets 경로가 "/assets" 과 같이 루트 밑에 존재한다고 지정하고 있다.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<script type="module" crossorigin src="/assets/index-C8szDPK6.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-5dJgFXHu.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
2. 수정후: 정상 동작 코드
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<script type="module" crossorigin src="assets/index-C8szDPK6.js"></script>
<link rel="stylesheet" crossorigin href="assets/index-5dJgFXHu.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
"assets"과 같이 현재 같은 디렉토리에 있음을 알려주기만 하면 문제가 바로 해결된다.
반응형
'Vue.js' 카테고리의 다른 글
| Vue에서 Tailwind를 사용하는 가장 쉬운 방법 (데모 포함) (0) | 2025.01.11 |
|---|
댓글