Help us understand the problem. What is going on with this article?

nuxt.js(v2)で絶対パス(https~)を取得する方法

More than 1 year has passed since last update.

nuxt.jsでOGPタグのURLを自動化するときに、レンダリングする前に絶対パスを取得する必要があった。調べても出てこなかったので取得方法をメモ。

取得方法は、ローカル・ステージング環境やデプロイ時にURLやディレクトリを変更したい方向け。

ということでさっそく…

1.nuxt.config.jsで下準備

ローカル・ステージング環境やデプロイ時にURLやディレクトリを変更したい。環境変数を使うと便利なので、nuxt.config.jsで下準備をしておく。

  1. baseUrlbaseDirを環境変数を使って変更できるように。
  2. envbaseUrlを登録。
  3. router.basebaseDirを登録。
nuxt.config.js
const baseDir = process.env.BASE_DIR || '/'
const baseUrl = process.env.BASE_URL || 'http://localhost:3000'

module.exports = {
  env: {
    baseUrl: baseUrl,
  },
  router: {
    base: baseDir,
  },
}

2.テストコード

test.vue
<template lang='pug'>
div
  p {{absolutePath}}
</template>

<script>
export default {
  computed: {
    absolutePath () {
      return `${process.env.baseUrl}${this.$router.history.base}${this.$route.path}`
    },
  }
}
</script>
簡単に取得内容を説明すると…

process.env.baseUrl

nuxt.config.jsでenvに登録した内容を取得。

$router.history.base

nuxt.config.jsでrouter.baseに登録した内容を「末尾の/なし!」で取得。

$route.path or $route.fullpath

routeパスを取得(fullpathにすると、ハッシュやクエリも一緒に取得)

3.実行

ターミナルで以下実行

MAC
BASE_URL=https://example.com BASE_DIR=/yourDir/ npm run dev
WIN

※windowsは環境変数の扱い方が違うのでcross-env経由で行う。nuxt.js(v2)系からは、cross-envがはじめから入っている。

npx cross-env BASE_URL=https://example.com BASE_DIR=/yourDir/ nuxt

4.結果

https://example.com/yourDir/test

OK。取得できた。
もっとスマートな方法があれば、だれか教えてくださいませ。m(__)m

Link

以下、公開中のnuxt.js(v2)関連の記事一覧

技術よりの記事

  1. nuxt.js(v2)のインストール〜ESLint設定まで
  2. nuxt.js(v2)の作業ディレクトリを整理
  3. nuxt.js(v2)のベースURLをターミナルからコントロール
  4. nuxt.js(v2)でpug/stylusを利用する
  5. nuxt.js(v2)でIE11対応をする(CSS編)
  6. nuxt.js(v2)でIE11対応をする(JS編)
  7. nuxt.js(v2)で絶対パス(https~)を取得する方法
  8. nuxt.js(v2)でSEOに必要なmeta(OGP)を入れたい
  9. nuxt.js(v2)でSEOに必要なmeta(OGP)で入力漏れの事故をなくす

よく使うプラグインのお話

  1. nuxt.js(v2)で便利なvue-mqを使ってみるがSSRモードでコンソールエラーがでるので確認してみた。
  2. nuxt-linkでスムーズスクロールするならvue-scrolltoが便利で気が利いている…と思う。
  3. nuxt.jsでパララックスをするならvue-parallax-jsがお手軽。Cool!

まとめ系

  1. nuxt.js(v2)でgenerate納品する前にやっておきたい設定
  2. nuxt.jsにおける「components」ディレクトリの規約(案)
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away