Nuxt ITかあさん

ITかあさん

目次：Nuxt

2018年12月19日| Nuxt

Nuxt.js　環境ごとにAPIのHOSTを変更する

Nuxt.js　環境ごとにAPIのHOSTを変更する

cross-envのインスト

cross-envをインストして、環境ごとに環境変数をわけられるようにします。
npm install --save cross-env

envファイルを作成する

アプリケーション直下に環境ごとにenvファイルを作成します。

env.development.js
env.production.js
env.staging.js

各環境に合わせて、APIのURIを設定します。下記はローカル開発環境用として、ステージング、本番用にそれぞれAPIのURIを設定しておきあmス

module.exports = {
apiBaseUrl: 'http://localhost:3000'
}

package.json


  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    //追加
    "build:stg": "cross-env NODE_ENV=\"staging\" nuxt build",
    //追加
    "build:prod": "cross-env NODE_ENV=\"production\" nuxt build",
    "start": "nuxt start",
    //追加
    "start:stg": "cross-env NODE_ENV=\"staging\" nuxt start",
    //追加
    "start:prod": "cross-env NODE_ENV=\"production\" nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint",
    "heroku-postbuild": "npm run build"
  },
...

nuxt.config

envの設定をnuxt.configに追加します

const pkg = require('./package')
//追加
const environment = process.env.NODE_ENV || 'development';
//追加
const envSet = require(`./env.${environment}.js`)
module.exports = {
  //追加
  env: envSet,
  mode: 'universal',

axios

環境変数はprocess.env.変数名
で呼び出すことができます。

var qs = require('qs');
import axios from 'axios'

class ApplyApi {
  constructor() {
    this.apiBase = process.env.apiBaseUrl;
  }
  apply(data) {
    axios.post(`${this.apiBase}/recruit_apply.json`, {
...
    },
     {
      headers: {
        'Content-Type': 'application/json'
      }
    })
  }
}

const applyApi = new ApplyApi();

export default applyApi;

2018年10月10日| Nuxt

Nuxt.js で動的タイトル設定

Nuxt.js で動的タイトル設定設定したいわー


ちょっと悩んだのでメモがてら。Nuxt.jsで作業中、タイトルをちゃんと設定したいな、となりまして。

nuxt.config.jsにtitleTemplateを使ってグローバルなタイトルの設定ができますが、それにプラス動的に各ページごとに加えたい時は下記のようにしてあげます

‘%s – ITかあさんNuxt.jsがんばるまん’

titleTemplateが不要な時は各ページで空を入れてあげるしかないっぽい。

これで、トップページの時は下記のようになります

トップページ – ITかあさんNuxt.jsがんばるまん
« »