Express.js と SPA を組み合わせる

Express-generator で作成したアプリと Vue.js アプリの作成については、以下のページを参考にしてください。

• シングルページアプリケーション - Vue.js

Vue.js のアプリに関しては、ルーターでページを切り替える程度のアプリで試しています。

vue.js で作成したアプリを以下のコマンドでビルドします。

npm run build

ルートディレクトリにdistというディレクトリが作成されます。

distディレクトリの内容をコピーし、Express.js のアプリの publicディレクトリに貼り付けます。

Express.js にルーティングを追加する

Vue.js で作成したアプリを公開するディレクトリを作成します。appというディレクトリに配置する場合、app.jsにルーティングを追加します。

app.use('/app', express.static(path.join(__dirname, 'app')));
app.get(/^\/app\/.*/, (req, res) => {
  res.sendFile(path.join(__dirname, 'app', 'index.html'));
});

Express.js アプリを起動し、http://localhost:5000/にアクセスしページが表示されるか確認します。

Vue.js のアプリを表示するには、「 http://localhost:5000/app 」にアクセスします。

app.get('/app/*', (req, res, next) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.get('/app/{*splat}', (req, res, next) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});