Vue 2 App에서 Express service 정적
vue 2 프로젝트(Web pack-simple template)에서 사용되는 express static data에 대해 생산 및 개발 구조가 다르기 때문에 문제가 있습니다.
개발: localhost/app
실가동: 서버/일부 디렉토리/애플리케이션
some-directory는 매우 자주 변경되므로 설정 파일에서 동적으로 설정됩니다.
서버의 서빙 파트.js:
if (config.root !== '/') {
app.use(`/${config.root}`, express.static(path.join(__dirname)));
}
app.use('/dist', express.static(path.join(__dirname, 'dist')));
변환된 JS 파일이 /dist 폴더에 있습니다.
앱 진입점 역할을 하는 index.html 파일입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>App Demo</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
앱이 루트에 있기 때문에 개발 중에 동작합니다.
그러나 프로덕션 빌드에서는 앱이 서버 하위 폴더에서 제공되기 때문에 작동하지 않습니다.
이 문제를 해결할 방법이 있나요?
감사합니다.
express js 서버가 vue 앱과 동일한 폴더에 있다고 가정하면:
const express = require('express');
const path = require('path');
const hostname = 'localhost';
const port = 3000;
const app = express();
app.use(express.static(path.join(__dirname, 'dist')));
app.get('*', (req, res) => {
res.sendFile(__dirname, '/dist/index.html');
});
app.listen(port, hostname, () => {
console.log("Listening at http://%s:%s/", hostname, port);
});
먼저 Vue 앱을 빌드하는 것을 잊지 마세요!
그러나 프로덕션 빌드에서는 앱이 서버 하위 폴더에서 제공되기 때문에 작동하지 않습니다.
"안 돼"라는 문구는 아무 의미도 없어뭐가 안 되는데?클라이언트에 오류가 있습니까?서버에 오류가 있습니까?HTML은 404인가요? HTML은 괜찮지만 이미지는 404인가요?무엇이 문제인지 명시하지 않았기 때문에 여기서는 일반적인 조언만 할 수 있습니다.
Express를 사용하여 라우터를 작성하는 경우:
const router = require('express').Router();
router.get('/a', ...);
router.get('/b', ...);
router.use('/c', express.static(...));
그러면 앱 전체를 모든 서브패스에 쉽게 넣을 수 있습니다.
app.use('/x', router);
서 ''는/x을 사용하다
그러나 HTML 파일 등의 모든 정적 자산은 절대 경로를 사용하지 않도록 해야 합니다. 예를 들어 다음과 같습니다.
<a href="/a/b/c.html">...</a>
<script src="/a/b/c.js"></script>
단, 다음과 같은 상대 경로만 있습니다.
<a href="b/c.html">...</a>
<script src="../../a/b/c.js"></script>
어플리케이션을 그대로 두고 역프록시를 사용하여 필요한 경로 프레픽스를 추가하는 경우에도 마찬가지입니다.이 경우 노드 코드를 조작하는 대신 패스 프레픽스를 추가할 수도 있습니다.노드 앱을 사용한 역방향 프록시에 대한 자세한 내용은 다음 질문을 참조하십시오.
- Nginx가 nodejs를 올바르게 프록시하지 않음
- 동일한 도메인에 대한 장고 및 노드 프로세스
- express에서 ngix 및 ssl 구현을 사용한 역방향 프록시 실패
- 노드/IIS가 있는 SSL
- 메인 웹 사이트를 통해 접속할 수 있도록 노드 JS 앱을 어디에 놓아야 합니까?
- Express 및 Nginx용 HTTPS 설정
- nginx의 server_name을 노드의 서버 변수로 사용하려면 어떻게 해야 합니까?
언급URL : https://stackoverflow.com/questions/43491518/express-serve-static-files-in-vue-2-app
'programing' 카테고리의 다른 글
| iframe에서 'X-Frame-Options'를 설정하는 방법 (0) | 2022.09.22 |
|---|---|
| 스태틱 클래스의 초기화는 언제 이루어집니까? (0) | 2022.09.22 |
| "Mysql 행 크기가 너무 큼"에 대한 제한 변경 (0) | 2022.09.22 |
| 다운로드 할 phpexcel (0) | 2022.09.22 |
| Java Eclipse:JAR로 내보내는 것과 실행 가능한 JAR로 내보내는 것의 차이 (0) | 2022.09.22 |