nuxtjs / vuejs / jinja template to vuejs / jsp to vuejs / 뷰로 converting / 변경 / 이용 뷰js /
template engine 와 함께 nuxt 사용하기
이것은 template engine 을 사용하면서 vuejs(또는 nuxt) 로 넘어가기 위한 중간단계로서 의미가 있다.
어느정도 시도를 해보니 사용하기 힘들다. nuxt generated page 가 template engine 에서 제공하는 명령어들을 사용하는 것이 힘들다. v-html을 이용해서 단순히 template을 만들어내는 것은 어느정도 괜찮지만, 그러면 vue lifecycle 이 제대로 동작하지 않는 듯 하다.
그래서 vuejs + template-engine 을 사용하던지 그냥 nuxt 만 사용하던지 선택을 해서 쓰는 것이 나을 듯 하다.
개인적으로 아래 방법이 가장 나은 듯 싶다.
template engine 을 vuejs 로
아래처럼 template engine 의 symbol 들을 write 할 수 있다. 다만 주의할 점은 v-html에 <script> tag 가 들어가 있으면 build 가 되지 않는다.
<template>
<div v-html="jinjaSyntax">
</div>
</template>
<script>
export default {
data() {
return {
jinjaSyntax: `
{% extends "layout/layout.html" %}
{% block title %}test{% endblock %}
{% block head %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/common.css') }}">
{% endblock %}
{% block root %}
<div id="Account">
</div>
{% endblock %}
`
}
}
}
</script>그리고 아래 같은 경우도 v-html 이외에 다른 tag 들은 만들어지지 않는다.
<template>
<div>
<div v-html="jinjaSyntax">
</div>
<div>test render</div>
</div>
</template>
...그래서 template engine 을 사용한다면, 제대로 vuejs 를 사용하지 못할 수 있다.
.vue 는 child template 으로 사용하지 말자
.vue에서 만들어진 nuxt template 은 html tag 를 가지고 있다. parent template 도 html tag 를 가지고 있고, head tag 도 가지고 있으면 결과가 이상해 진다. 이유는 알 수 없지만, page 는 어찌어찌 생성은 됐지만, vue 가 제대로 동작하지 않았다. (대표적으로 mounted 가 호출되지 않았다.)
만약 위의 예시처럼 child template 으로 nuxt template 을 사용하는 것은 좋은 생각이 아닌듯 하다.
nuxt generate
{
...
"scripts": {
"clean": "node ./tasks/clean.js",
"dev": "nuxt",
"deploy-js" : "copyfiles -u 1 dist/_nuxt/**/*.* ../static/",
"deploy-html" : "copyfiles -u 1 dist/**/* ../templates/nuxt/ -e dist/_nuxt/**/*",
"build": "nuxt build",
"generate": "nuxt generate && npm run clean && npm run deploy-js",
"start": "nuxt start"
},
...
"dependencies": {
"nuxt": "^2.15.6"
},
"devDependencies": {
"copyfiles": "^2.4.1"
}
} 현재 아래 같은 directory 구조를 가지고 있다고 하자.
<root>-+- nuxt
|
+- templates -- nuxt
|
+- static -- _nuxtbuild.publicPath 와 generate.dir
생성시점에 특정 path 에 결과를 write 할 수 있다.
export default {
target: 'static', // default is 'server'
build: {
publicPath: '/_nuxt/'
},
generate: {
dir: 'dist'
subFolders: false
},
}사용을 못하는 이유
build.publicPath 를 지정하면, js 가 생성되는 곳이 지정되는데, 만약 위처럼 /_nuxt로 설정하면 아래처럼 만들어진다.
<root>-+- nuxt -- dist -- _nuxt -- f7be4bd.js
|
+- templates -- nuxt
|
+- static -- _nuxt그리고 .html 을 보면 script 의 src 는 다음처럼 설정이 된다.
<script src="/_nuxt/f7be4bd.js" defer></script>그런데 script src 등은 보통 web server 에서 static file 을 service 하는 특정 directory 가 ‘/’ 가 된다. 그런 이유로 위처럼 script src 가 만들어지면, _nuxt 폴더는 /static 아래에 놓아야 한다. 그리고 .html 은 template engine 을 사용하기 위해 만들고 있는 것이여서 templates directory 로 들어가야 한다.
그래서 generate 시점에 .html과 js 를 분리해서 각각 원하는 path 에 write 할 수 있어야 한다. 하지만 그런 option 은 찾을 수 없었다.
copyfiles
결국 택한 방법은 그냥 generate 을 하고, 그것을 copyfiles 를 이용해서 옮겨주는 작업을 하도록 했다. clean.js 는 여기를 참고하자.
{
...
"scripts": {
"clean": "node ./tasks/clean.js",
"dev": "nuxt",
"deploy-js" : "copyfiles -u 1 dist/_nuxt/**/*.* ../static/",
"deploy-html" : "copyfiles -u 1 dist/**/* ../templates/nuxt/ -e dist/_nuxt/**/*",
"build": "nuxt build",
"generate": "nuxt generate",
"gen": "npm run generate && npm run clean && npm run deploy-js && npm run deploy-html",
"start": "nuxt start"
},
"dependencies": {
"nuxt": "^2.15.6"
},
"devDependencies": {
"copyfiles": "^2.4.1"
}
} script src 설정을 위해서 build.publicPath를 사용
그리고 build.publicPath 값으로 .html 안의 script tag 의 path 가 정해진다. 그러므로 build.publicPath 값은 일단 .js file 이 존재하게 될 위치로 정하자.
<body>
기본적으로 nuxt generate 가 html 을 만들때 완전한 html format 을 만든다. 그래서 <html> tag 로 시작하고, .vue file 의 내용은 <body> 안에 넣게 된다.
그래서 되도록 body 의 내용만을 남기고 나머지 부분들은 nuxt 설정으로 해결하는 것이 낫다.
title, meta, link
title, meta, link 등 body 외의 요소들은 .vue 안에 넣거나, nuxt.config.js 에 넣어주면 된다. .vue 는 개별page 에 대한 값을 넣을때 쓰고, nuxt.config.js 은 전체에 들어갈 내용을 넣어준다. 자세한 내용은 다음 링크를 참고하자.
{
head: {
title: 'No title',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: 'my website description'
}
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Yrsa&display=swap'}
]
},
...
}
댓글 없음:
댓글 쓰기