Vue.jsプロジェクトにてデフォルトでやる作業内容メモ

いろいろなシステムをコーディングする上でこれはやっておきたい内容メモ

Vueでのv-forを使ったnavbar多言語対応

内容

言語対応を行い、ヘッダーにリストレンダリングにて多言語対応を行う。

前提条件

Vue-Routerの環境ができていること
Bootstrap-Vueの環境ができていること

プラグイン

npm install vue-i18n --save

変更ファイル一覧

main.js

// 多言語対応
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
import { data } from '@/lib/lang/index.js'
const i18n = new VueI18n({
  locale: 'en', // デフォルト言語設定
  fallbackLocale: 'ja', // 選択中の言語に対応する文字列が存在しない場合はこの言語の文字列を使用する
  messages: data
})

new Vue({
  i18n: i18n,
})

lib/lang/index.js

import en from '@/lib/lang/TranslationsEn'
import jp from '@/lib/lang/TranslationsJp'

// jsonを結合する
var data = Object.assign(en, jp)

export { data }

lib/lang/TranslationsEn.js

export default {
  en: {
    Route: {
      About: 'About',
      Portfolio: 'Portfolio'
    }
  }
}

lib/lang/TranslationsJp.js

export default {
  ja: {
    Route: {
      About: 'アバウト',
      Portfolio: 'ポートフォリオ'
    }
  }
}

header.vue

<template>
  <div>
    <b-navbar>
      <b-navbar-brand href="/">hoge</b-navbar-brand>
      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
      <b-collapse id="nav-collapse" is-nav>
        <b-navbar-nav>
          <b-nav-item v-for="route in routes" :key="route.name" :to="route.path">
            <span v-if="route.path !== '/'">{{$t(route.name)}}</span>
          </b-nav-item>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
  </div>
</template>

<script>
import router from '@/router/index.js';

export default {
  name: 'header',
  data: () => ({
    routes: router.app._router.options.routes
  })
}
</script>

<style scoped>
/*  */
</style>

router/index.js

const routes = [
  {
    path: '/',
    name: 'Route.Home',
    component: Home
  },
  {
    path: '/about',
    name: 'Route.About',
    component: () => import('@/views/About.vue')
  },
  {
    path: '/portfolio',
    name: 'Route.Portfolio',
    component: () => import('@/views/Portfolio.vue')
  }
]

相対パスではなく@からの絶対パスに変更

内容

何もしないと編集中のファイルからの相対パスになるが、[src]からの絶対パスにするために以下の編集を行う。

方法

vue.config.js

var path = require('path')

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        vue$: 'vue/dist/vue.esm.js',
        '@': path.resolve(__dirname, 'src/'),
      },
    },
  }
}

システム共通設定configファイルの利用

内容

システムの設定ファイルを持たせる

方法

main.js

import tempConfig from '@/components/config.js'

new Vue({
  beforeCreate() {
    Object.keys(tempConfig.config).forEach((key) => {
      Vue.prototype['$' + key] = tempConfig.config[key]
    })
  },
}).$mount('#app')

components/config.js

export default {
  config: {
    sysId: 'temp',
    sysName: 'Template',
    user: { id: '01', name: 'administrator' }
  }
}

システムブラウザのタイトル変更

内容

しょうもないがシステムのタイトルがどこに記載されているかわからなくなったので、メモ

方法

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> -->
    <title>タイトル！！</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Vueだったらこれできたら便利じゃない？シリーズ