VuePressにScriptタグを追加したい場合の記述のメモ。VuePressのバージョンは1.0.0-alpha.47です。
Head内へのScript追加
- config.jsに追加する
config.jsにこんな書き方があるんですねぇ。
config.js
head: [
['script',{}, `
console.log('hello');
`],
['script', { src: 'https://code.jquery.com/jquery-3.4.0.min.js' }]
]
こんな感じでhead内に任意のスクリプトを書いたり、外部のスクリプトを読み込めます。
<html>
<head>
<script>
console.log('hello');
</script>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
</head>
<body>
</body>
</html>
ちなみにこんな感じでtype属性を書くと
['script',{type: 'text/javascript'}, `
console.log('hello');
`]
生成されるhtmlにもtype属性が付きますが、
<script type="text/javascript">
console.log('hello');
</script>
html5くらいからその辺の指定はいらないって話になってるのでこの書き方は冗長なので{type: 'text/javascript'}は{}としています。
</body>の直前に追加1
headよりも</body>直前にいれたいケースです。
Layout.vue
<template>
<div>
<main>
<p>こんにちは</p>
</main>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
</div>
</template>
Layout.vueなどのテンプレートファイルは<template>タグの子要素は一個しか置けない模様なのでdivで囲った中にscriptタグを追加しています。
生成されるhtmlはこんな感じ。
<html>
<head></head>
<body>
<div id="app" data-server-rendered="true">
<div data-v-1473a8b9>
<main>
<p>こんにちは</p>
</main>
<script src="https://code.jquery.com/jquery-3.4.0.min.js" data-v-1473a8b9></script>
</div>
<div class="global-ui"></div></div>
<script src="/assets/js/app.90b476a1.js" defer></script>
<script src="/assets/js/2.64b02ba7.js" defer></script>
<script src="/assets/js/4.c1449ba0.js" defer></script>
</body>
</html>
</body>の直前に追加2 - ビルドに組み込む
↑の書き出されたhtmlの最後の部分が内部で利用しているjsファイルを圧縮して読み込んでる箇所っぽいです。
<script src="/assets/js/app.90b476a1.js" defer></script>
<script src="/assets/js/2.64b02ba7.js" defer></script>
<script src="/assets/js/4.c1449ba0.js" defer></script>
別途読み込むよりはここに入れ込みたいなぁと思ったりしました。
調べたところで出てきた、
を参考にvue-script2を採用してみました。
$ yarn add -D vue-script2
.vuepress/enhanceApp.jsを作成して、vue-script2を有効にします。
公式にもありますが、拡張したい際はここをいじるらしい。
.vuepress/enhanceApp.js
import VS2 from 'vue-script2'
export default ({
Vue
}) => {
Vue.use(VS2)
}
これでscript2タグが使えます。
Layout.vue
<template>
<div>
<main>
<p>こんにちは</p>
</main>
<script2 src="https://code.jquery.com/jquery-3.4.0.min.js"></script2>
</div>
</template>
script2で書いてあげるとビルドに組み込まれてスッキリした形になりました。
<html>
<head></head>
<body>
<div id="app" data-server-rendered="true">
<div data-v-1473a8b9>
<main>
<p>こんにちは</p>
</main>
</div>
<div class="global-ui"></div></div>
<script src="/assets/js/app.90b476a1.js" defer></script>
<script src="/assets/js/2.64b02ba7.js" defer></script>
<script src="/assets/js/4.c1449ba0.js" defer></script>
</body>
</html>
これでちゃんとjQueryも使えます。
雑感
external script support ででてる提案っぽい書き方対応してくれるといいなぁ。