設定
目的
VuePress で Vue Google Adsense パッケージを使用すると、ドキュメントビルド時にエラーが発生します。
ここでは、その回避方法を紹介します。
下記エラーが発生する。
$ yarn docs:build
yarn run v1.17.3
warning package.json: No license field
$ vuepress build docs
wait Extracting site metadata...
tip Apply theme @vuepress/theme-default ...
tip Apply plugin container (i.e. "vuepress-plugin-container") ...
tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ...
tip Apply plugin @vuepress/active-header-links (i.e. "@vuepress/plugin-active-header-links") ...
tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ...
tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ...
tip Apply plugin @vuepress/google-analytics (i.e. "@vuepress/plugin-google-analytics") ...
tip Apply plugin @vuepress/last-updated (i.e. "@vuepress/plugin-last-updated") ...
✔ Client
Compiled successfully in 9.44s
✔ Server
Compiled successfully in 5.30s
wait Rendering static HTML...
Rendering page: /error Error rendering /: false
undefined
ReferenceError: window is not defined
at Object.<anonymous> (node_modules/vue-google-adsense/dist/VueGoogleAdsense.min.js:2:231)
at __webpack_require__ (webpack/bootstrap:25:0)
at Module.<anonymous> (server-bundle.js:2092:28)
at __webpack_require__ (webpack/bootstrap:25:0)
at Object.<anonymous> (server-bundle.js:1179:18)
at __webpack_require__ (webpack/bootstrap:25:0)
at server-bundle.js:118:18
at Object.<anonymous> (server-bundle.js:121:10)
at evaluateModule (/Users/[your-name]/sample-project/node_modules/vue-server-renderer/build.dev.js:9303:21)
at /Users/[your-name]/sample-project/node_modules/vue-server-renderer/build.dev.js:9361:18
at new Promise (<anonymous>)
at /Users/[your-name]/sample-project/node_modules/vue-server-renderer/build.dev.js:9353:14
at Object.renderToString (/Users/[your-name]/sample-project/node_modules/vue-server-renderer/build.dev.js:9529:9)
at Build.renderPage (/Users/[your-name]/sample-project/node_modules/@vuepress/core/lib/node/build/index.js:156:34)
at Build.render (/Users/[your-name]/sample-project/node_modules/@vuepress/core/lib/node/build/index.js:94:33)
at async App.build (/Users/[your-name]/sample-project/node_modules/@vuepress/core/lib/node/App.js:492:5)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
$
手順
VuePress プロジェクトの作成
$ mkdir sample-project
$ cd sample-project
$ yarn add -D vuepress
$ mkdir docs
下記MarkDownファイルを作成します。 (docs/README.md)
# This is an AdSense sample
<ClientOnly>
<CallAdsense />
</ClientOnly>
下記Vueファイルを作成します。 (docs/.vuepress/components/CallAdsense.vue)
data-ad-client と data-ad-slot を、自身の値に設定する。
<template>
<div>
<Adsense
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"
/>
</div>
</template>
Vue Google Adsense パッケージの追加
$ yarn add -D vue-script2 vue-google-adsense
下記JSONファイルを修正します。 (package.json)
{
"devDependencies": {
"vue-google-adsense": "^1.7.0",
"vue-script2": "^2.1.0",
"vuepress": "^1.0.4"
},
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
ヘッドレス(ブラウザレス)環境のために enhanceApp.js を作成
下記JavaScriptファイルを作成します。 (docs/.vuepress/enhanceApp.js)
export default ({
Vue,
options,
router,
siteData
}) => {
if (typeof window !== 'undefined') {
import('vue-google-adsense')
.then(module => {
const Ads = module.default
Vue.use(require('vue-script2'))
Vue.use(Ads.Adsense)
Vue.use(Ads.InArticleAdsense)
Vue.use(Ads.InFeedAdsense)
})
.catch(e => {
console.log(e)
})
}
}
ドキュメントビルド
$ yarn docs:build
yarn run v1.17.3
warning package.json: No license field
$ vuepress build docs
wait Extracting site metadata...
tip Apply theme @vuepress/theme-default ...
tip Apply plugin container (i.e. "vuepress-plugin-container") ...
tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ...
tip Apply plugin @vuepress/active-header-links (i.e. "@vuepress/plugin-active-header-links") ...
tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ...
tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ...
✔ Client
Compiled successfully in 9.11s
✔ Server
Compiled successfully in 5.65s
wait Rendering static HTML...
success Generated static files in docs/.vuepress/dist.
✨ Done in 14.55s.
$
docs/.vuepress/dist を(Netlifyなどの)ご自身のサイトへデプロイしてください。
うまくいけば、 Goolge AdSense が正しく表示されるはずです。