webpack 4, vue.js, vue-routerを用いたSPAの開発環境

自分用メモも兼ねて，シングルページアプリケーション（SPA）基本となるプロジェクトの構成を紹介します．

webpack 4ではconfig.jsを省略できるようになったようですが，少しは設定が必要なようです．

ディレクトリ構成

index.html
node_modules/
package.json
src/
- about.vue
- app.vue
- index.js
- top.vue
webpack.config.js

index.html

<!DOCTYPE html>
<html>

<head>
    <title>Vue-Router test</title>
    <meta charset="UTF-8">
</head>

<body>
    <div id="app"></div>
    <script src="main.js"></script>
</body>

</html>

最低限のhtmlを記載しています．div#appがvue.jsによって変更されます．main.jsの読み込みはbodyの最後にしておかないと，

[Vue warn]: Cannot find element: #app

とエラーが出ます．

package.json

{
  "name": "vuetest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.5.16",
    "vue-loader": "^15.2.2",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.16"
  },
  "devDependencies": {
    "webpack": "^4.10.2",
    "webpack-cli": "^2.1.4",
    "webpack-dev-server": "^3.1.4"
  }
}

上記ファイルは，下記のコマンドで自動的に作成されます．

npm init -y
sudo npm install vue vue-loader vue-router vue-template-compiler
sudo npm install webpack webpack-cli webpack-dev-server -D

webpack.config.js

const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
  mode: "development",
  entry: ["./src/index.js"],
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: "vue-loader"
      }
    ]
  },
  devServer: {
    open: true,
    historyApiFallback: true
  },
  plugins: [new VueLoaderPlugin()]
};

vue-router.jsを使用する場合は，VueLoaderPluginの使用を明示します．.vueファイルを使用するので，vue-loaderを使用します．

historyApiFallbackを有効にすることで，404リクエストの際はすべてindex.htmlを返すようにします．*1この設定が有効でなければ，トップページでリロードした場合に，404 cannot get /about などとエラーとなります．spaの場合は必須です．

index.js

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

import App from "./app.vue";
import Top from "./top.vue";
import About from "./about.vue";

const router = new VueRouter({
  mode: "history",
  routes: [{ path: "/", component: Top }, { path: "/about", component: About }]
});

new Vue({
  el: "#app",
  router,
  render: h => h(App)
});

app.vueを基本として，top.vue, about.vueのページを作成します．

app.vue

<template>
    <div>
        <router-link to="/">
            top
        </router-link>
        <router-link to="/about">
            about
        </router-link>
        <router-view></router-view>
    </div>
</template>

top.vueとabout.vueがrouter-viewコンポーネントに挿入されます．

top.vue

<template>
    <div>
        Topページ
    </div>
</template>

about.vue

<template>
    <div>
        Aboutページ
    </div>
</template>

以上の構成で，

npm run dev

と起動すれば，自動的にブラウザーが開いて(open オプション)，Hot Module Replacementが有効となりスムーズなデザイン設計ができるようなりました．

*1:webpack docs

みーのぺーじ

みーが趣味でやっているPCやソフトウェアについて．Python, Javascript, Processing, Unityなど．