vue-cli 설정 publicPath 수기

몇 가지 publicPath 를 설정 한 후,포 장 된 index.html 파일 을 비교 합 니 다.
테스트 배경:

포장 build 가 끝 날 때마다/dist 폴 더 를 따로 만 들 고 dist 에 서 는 매번 같은 파일 디 렉 터 리 만 생 성 합 니 다

배치 할 때 서버 의/test 폴 더 에 배 치 됩 니 다

압축 된 파일 디 렉 터 리:


├─dist
 ├─css
 ├─img
 └─js
 index.html

1.PublicPath 를 설정 하지 않 을 때 배치 후 요청 경로:
http://111.222.333.444:8888/css/app.0b79487b.css


// vue.config.js

module.exports = {
  // publicPath: '',
}


<!DOCTYPE html>
<html lang=en>
<head>
  <title>test</title>
  <link href=/css/app.0b79487b.css rel=preload as=style>
  <link href=/js/app.ba2d9b8a.js rel=preload as=script>
  <link href=/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link href=/css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=/js/chunk-vendors.e7ac9ff2.js></script>
<script src=/js/app.ba2d9b8a.js></script>
</body>
</html>

2./로 설정 할 때 배치 후 요청 경로:
http://111.222.333.444:8888/css/app.0b79487b.css


// vue.config.js

module.exports = {
  publicPath: '/',
}


<!DOCTYPE html>
<html lang=en>
<head>
  <title>test</title>
  <link href=/css/app.0b79487b.css rel=preload as=style>
  <link href=/js/app.ba2d9b8a.js rel=preload as=script>
  <link href=/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link href=/css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=/js/chunk-vendors.e7ac9ff2.js></script>
<script src=/js/app.ba2d9b8a.js></script>
</body>
</html>

3../로 설정 할 때 배치 후 요청 경로:
http://111.222.333.444:8888/test/css/app.0b79487b.css


// vue.config.js

module.exports = {
  publicPath: './',
}


<!DOCTYPE html>
<html lang=en>
<head>
  <title>test</title>
  <link href=css/app.0b79487b.css rel=preload as=style>
  <link href=js/app.8569d42d.js rel=preload as=script>
  <link href=js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link href=css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=js/chunk-vendors.e7ac9ff2.js></script>
<script src=js/app.8569d42d.js></script>
</body>
</html>

4.static 로 설정 할 때 배치 후 요청 경로:
http://111.222.333.444:8888/test/static/css/app.0b79487b.css


// vue.config.js

module.exports = {
  publicPath: 'static',
}


<!DOCTYPE html>
<html lang=en>
<head>
  <title>test</title>
  <link href=static/css/app.0b79487b.css rel=preload as=style>
  <link href=static/js/app.d0717808.js rel=preload as=script>
  <link href=static/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link href=static/css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=static/js/chunk-vendors.e7ac9ff2.js></script>
<script src=static/js/app.d0717808.js></script>
</body>
</html>

5../static 로 설정 할 때 배치 후 요청 경로:
http://111.222.333.444:8888/test/static/css/app.0b79487b.css


// vue.config.js

module.exports = {
  publicPath: './static',
}


<!DOCTYPE html>
<html lang=en>
<head>
  <title>test</title>
  <link href=static/css/app.0b79487b.css rel=preload as=style>
  <link href=static/js/app.d0717808.js rel=preload as=script>
  <link href=static/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link href=static/css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=static/js/chunk-vendors.e7ac9ff2.js></script>
<script src=static/js/app.d0717808.js></script>
</body>
</html>

6../static 로 설정 할 때 배치 후 요청 경로:
http://111.222.333.444:8888/static/css/app.0b79487b.css


// vue.config.js

module.exports = {
  publicPath: '../static',
}


<!DOCTYPE html>
<html lang=en>
<head>
  <title>test</title>
  <link href=../static/css/app.0b79487b.css rel=preload as=style>
  <link href=../static/js/app.695b7ccc.js rel=preload as=script>
  <link href=../static/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link href=../static/css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=../static/js/chunk-vendors.e7ac9ff2.js></script>
<script src=../static/js/app.695b7ccc.js></script>
</body>
</html>

7.../로 설정 할 때 배치 후 요청 경로:
http://111.222.333.444:8888/css/app.0b79487b.css


// vue.config.js

module.exports = {
  publicPath: '../',
}


<!DOCTYPE html>
<html lang=en>
<head>
  <title>test</title>
  <link href=../css/app.0b79487b.css rel=preload as=style>
  <link href=../js/app.67ace555.js rel=preload as=script>
  <link href=../js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link href=../css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=../js/chunk-vendors.e7ac9ff2.js></script>
<script src=../js/app.67ace555.js></script>
</body>
</html>

vue-cli 설정 publicPath 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue-cli 설정 publicPath 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

【Vue.js】Xserver에 Vue CLI로 만든 초간이 페이지를 배포해 보았다.

Vue CLI를 사용한 포트폴리오 제작은 처음이었기 때문에, 일단 제작에 착수하기 전에 배포가 가능한지 시도해 보았습니다. (모처럼 만들었는데 배포할 수 없다니 된다면 너무 슬프니까...웃음) 결론, 비교적 간단하게...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

vue-cli 설정 publicPath 수기

좋은 웹페이지 즐겨찾기