Vueのrouternのヒストリーモードとは通常のハッシュモードとは違い、#なしの普通のURLで１ページアプリを実現する方法。これをサイトのルートで運用するときはマニュアルに書いてある通りなのでハマることはないのだが、サブディレクトリでやろうとすると大変だったので覚書。
ここではサブディレクトリを/homepageとする。
vue.config.js
vue.config.jsを以下のように書く。
|
1 2 3 4 5 |
module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/homepage/' : '/' } |
router.js
src/router.jsを以下のように書く。
|
1 2 3 4 5 6 7 8 |
... export default new Router({ mode: 'history', base: process.env.NODE_ENV === 'development' ? '/' : '/homepage/', routes: [ ... ] .. |
.htaccess
public/.htaccessを以下のように書く
|
1 2 3 4 5 6 7 8 |
<IfModule mod_rewrite.c> RewriteEngine On RewriteBase /homepage RewriteRule ^homepage/index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /homepage/index.html [L] </IfModule> |