ページが更新されたときにヒーローで展開されたVue + Webpackアプリ

Question

vue-cliとwebpackテンプレートを使用してvueアプリを生成し、this guideを使用してherokuにデプロイしました。私は問題なく走らせることができましたが、ページをリフレッシュするか、サブルートに直接アクセスしました。

server.js

var express = require('express') 
var path = require('path') 
var serveStatic = require('serve-static') 
app = express() 
app.use(serveStatic(__dirname)) 
var port = process.env.PORT || 5000 
app.listen(port) 
console.log('server started '+ port) 

router.js

マイVUEルータの設定

export default new Router({ mode: 'history', routes })

Answer 1

スパの一般1 index.htmlに持っており、他の路線へのナビゲーションアプリではhですJavascript自体によってandledされています。これにより、サブルートをリフレッシュまたは直接アクセスすると障害が発生します。

あなたがmode: 'history'を使用してvuejsルータの設定でhistoryモードを設定しているので、あなたは説明here: Example server configurationsようconnect-history-api-fallbackの使用を検討することができます。

1. npm install --save connect-history-api-fallback

2. あなたの特急

   var history = require('connect-history-api-fallback'); 
   
   var express = require('express') 
   var path = require('path') 
   var serveStatic = require('serve-static') 
   app = express() 
   //add this middleware 
   app.use(history());  
   app.use(serveStatic(__dirname)) 
   var port = process.env.PORT || 5000 
   app.listen(port) 
   console.log('server started '+ port)