여러 page 에서 vue 를 호출 / 각 페이지 마다 vue 호출
vuejs 에서 여러 entry point 를 만들기
대체로 우리가 SPA 를 만들면 entry point 가 하나이다. 그래서 그곳에서
new Vue 를 호출해서 사용한다. 그런데 entry point 를 여러개
만들면, 그 entry point 한 곳마다 new Vue 를 하는 것이라
보면 된다.
vue-cli 설치
entry point 를 여러곳으로 가져갈 수 있다. 이것은 ref. 1 을 보면, vue-cli 의 버전이 3.x 이상이 돼야 할 것 같다.
npm i @vue/cli
./node_modules/.bin/vue create mynewprojvue.config.js 설정
아래처럼 각 entry point 를 설정하면 된다. 아래는 manage 라는 entry
point 를 설정한 것이다. publicPath option 에 대해서는 ref.
2 를 참고하자.
여기의 옵션은 HTML Webpack Plugin의 option 이다. 그래서
다른 옵션들은 HTML
Webpack Plugin options를 참고하면 된다.
module.exports = {
pages: {
// manage
manage: {
entry: 'src/main.js',
template: 'public/index.html',
filename: 'manage/index.html', // manage
title: 'Manage Page',
chunks: ['chunk-vendors', 'chunk-common', 'manage'] // manage
}
},
publicPath: ''
}npm run buildvue.config.js tips
다음처럼 template 의 경로를 하나로 모으는 것이 낫다. 그래야 /dist
에서도 dist/template/... 처럼 한 곳으로 .html 을 모을 수
있다.
module.exports = {
pages: {
// set entry-point for each page
applist: {
entry: 'src/admin/applist/main.js',
template: 'public/template/admin/base/admin-base.html',
filename: 'template/admin/applist/index.html',
title: 'App List',
chunks: ['chunk-vendors', 'chunk-common', 'adm-applist']
}
},
publicPath: '/static/vue/'
}head tag
참고로, vuejs 에서 compile 을 해서 만들어지면, vue 를 compile 한
결과를 import 하는 code를 결과 file 에 넣어주게 된다. 그런데 이값은 head
에 넣어주기 때문에, template 에는 <head> 를
지정해주도록 하자. 그렇지 않으면, <head/> 를 항상
결과파일 처음에 넣어버리게 된다.
다음 예를 참고하자.
case 1
template file:
<!DOCTYPE html>
<html>
<body>
</body>
</html>결과 file:
<!DOCTYPE html>
<html>
<head>
<script defer="defer" src="/static/pavue/js/chunk-vendors.ea52ecde.js"></script>
<script defer="defer" src="/static/pavue/js/prodmng.63b80c73.js"></script>
<link href="/static/pavue/css/chunk-vendors.053b6b6e.css" rel="stylesheet">
<link href="/static/pavue/css/prodmng.dd98df2c.css" rel="stylesheet">
</head>
<body>
</body>
</html>case 2
template file:
<!DOCTYPE html>
<body>
</body>결과 file:
<head>
<script defer="defer" src="/static/pavue/js/chunk-vendors.ea52ecde.js"></script>
<script defer="defer" src="/static/pavue/js/prodmng.63b80c73.js"></script>
<link href="/static/pavue/css/chunk-vendors.053b6b6e.css" rel="stylesheet">
<link href="/static/pavue/css/prodmng.dd98df2c.css" rel="stylesheet">
</head>
<!DOCTYPE html>
<body>
</body>case 3
template file:
<!doctype html>
<body></body>
<head></head>결과 file:
<!doctype html>
<body></body>
<head>
<script defer="defer" src="/static/pavue/js/chunk-vendors.ea52ecde.js"></script>
<script defer="defer" src="/static/pavue/js/prodmng.63b80c73.js"></script>
<link href="/static/pavue/css/chunk-vendors.053b6b6e.css" rel="stylesheet">
<link href="/static/pavue/css/prodmng.dd98df2c.css" rel="stylesheet">
</head>
댓글 없음:
댓글 쓰기