はじめに

vue.jsでWEBアプリケーションを構築する場合、
VueRouterを使用してSPA(Single Page Application)にすることが主流かと思います。
ただ、SPAにした場合の弊害？として、
サーバサイドに配置したページを一度読み込むと、データの読み込みでサーバとアクセスするものの、
JSファイルの再読み込みはされません。
そのため、不具合などでサーバサイドのJSファイルを入れ替えても、
クライアント側は古いJSファイルを利用し続けるため、不具合が解消しません。
このため、マルチページでvue.jsを使用を検討してみました。

やってみた

vueプロジェクトの作成

vue createコマンド実行
cmd vue create no-spa-vue
Manually select featuresを選択する
※過去に作成したプロジェクトを記憶しているが、今回は無視して、「Manually・・・」を選ぶ
機能を選ぶ
※今回は、「babel」だけ。
package.jsonを選ぶ
今回は保存しない
※設定を保存するか聞いてくるので、今回は「n」を入力して保存しない。

※プロジェクト作成が始まる
プロジェクトできる

マルチページでの実装を行う。

indexページを作成する

f:id:where-is-wally:20210802175119p:plain

src/page/index/index.js

import Vue from 'vue'  
import App from '/src/page/index/index.vue'  

Vue.config.productionTip = false  
   
new Vue({  
   render: h => h(App),  
}).$mount('#app')

src/page/index/index.vue

<template>
  <div id="app2">
    <img alt="Vue logo" src="../../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from '/src/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app2 {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

testページを作成する

f:id:where-is-wally:20210805123159p:plain

src/page/index/test.js

import Vue from 'vue'
import Test from './test.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(Test),
}).$mount('#app')

src/page/test/test.vue

<template>
  <div id="app">
    <span>TESTです。</span>
  </div>
</template>

<script>
import HelloWorld from '../../components/HelloWorld.vue'

export default {
  name: 'Other',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

vue.config.jsでエントリページを定義する

※ vue.config.jsは、プロジェクト直下に配置する

module.exports = {
  pages: {
    index: {
      entry: 'src/page/index/index.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: 'Index Page'
    },
    test: {
      entry: 'src/page/test/test.js',
      template: 'public/index.html',
      filename: 'test.html',
      title: 'Test ページ'
    }
  }
}

実行してみる

npm run serve実行
http://localhost:8080/でアクセスする
http://localhost:8080/testでアクセスする

ビルドしてみる

npm run build実行
distフォルダに一式作成されている

定義したindex.html/test.htmlが生成されて、
マルチページアプリケーションとなっています。

さいごに・・・

いちおうSPAでない、Vue.jsアプリケーションを作成できそうなことは分かりました。
画面パラメータの受け方や、同じ部分の共通化など、
いろいろ課題はありそうですが、後々まとめていきます・・・。

技術っぽいことを書いてみるブログ

PythonとかVue.jsとか技術的なことについて書いていきます。

vue.js ～SPAでないvueアプリケーションを構築してみる～