質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
AMP(Accelerated Mobile Pages)

AMP(Accelerated Mobile Pages)は、Google社を始め複数のプラットフォームが共同で参加しているプロジェクト。モバイルユーザーのUX向上を目的とし、モバイルページの表示速度の高速化を図っています。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

0回答

514閲覧

nuxt.jsを使ってamp対応する際に本番環境に処理が反映されない

curry103

総合スコア13

AMP(Accelerated Mobile Pages)

AMP(Accelerated Mobile Pages)は、Google社を始め複数のプラットフォームが共同で参加しているプロジェクト。モバイルユーザーのUX向上を目的とし、モバイルページの表示速度の高速化を図っています。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

0グッド

0クリップ

投稿2019/06/23 09:12

nuxt.config.jsで既存のタグをampのタグにリプレイスする処理をしており、ローカル環境ではリプレイスされて表示されているのですが、本番環境ではタグのリプレイスがされていない状態でどのように対応したらよいか分かっていない状態です。
恐らく本番環境ではhookが効いていないのかと思ったのですが。。。

以下がnuxt.config.jsに記述しているリプレイス用のコードとなります。
もし対応方法が分かる方がいらっしゃいましたらご教授お願いできないでしょうか?
また、情報の共有不足な点がありましたらご連絡をお願いします。

import pkg from './package' const modifyHtml = (html) => { // Add amp-custom tag to added CSS html = html.replace(/<style data-vue-ssr/g, '<style amp-custom data-vue-ssr') html = html.replace(/</style><style amp-custom data-vue-ssr-id="406f0688:0">@charset "UTF-8";/g, '') html = html.replace(/<style amp-custom data-vue-ssr-id="b15e4592:0">@charset "UTF-8";/g, '<style amp-custom data-vue-ssr-id="b15e4592:0">') // Remove every script tag from generated HTML html = html.replace(/<script\b[^<]*(?:(?!</script>)<[^<]*)*</script>/gi, '') html = html.replace(/<html/gi, '<html ⚡') html = html.replace(/<img([^>]*)>/gi, (match, sub) => { return `<amp-img ${sub} layout=intrinsic></amp-img>` }) const ampBoilerplate = '<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>' // Add AMP script before </head> const ampYoutube = '<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>' const ampScript = '<script async src="https://cdn.ampproject.org/v0.js"></script>' const ampSocial = '<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>' html = html.replace('</head>', ampScript + ampBoilerplate + ampSocial + ampYoutube + '</head>') return html } export default { mode: 'universal', /* ** Headers of the page */ head: { meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] }, /* ** Customize the progress-bar color */ loading: { color: '#fff' }, /* ** Global CSS */ css: [ '~/assets/css/main.scss', ], /* ** Plugins to load before mounting the App */ plugins: [ { src: '~/plugins/vue-lazyload.js', ssr: false } ], /* ** Nuxt.js modules */ modules: [ [ 'nuxt-user-agent', '@nuxtjs/sitemap' ] ], hooks: { // This hook is called before rendering the html to the browser 'render:route': (url, page) => { page.html = modifyHtml(page.html) } }, /* ** Build configuration */ build: { /* ** You can extend webpack config here */ extend(config, ctx) { } } }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問