前提
Vue.jsにて開発をしております。
Vue-cliに乗っりルーティング、サーバーはApacheとなっており、.htaccessを利用して、リロード時にも404とはならないよう設定を施したいです。
# package.json、すべては記載しておりません dependencies "vue": "^2.6.10", "vue-router": "^3.0.3", "vuex": "^3.0.1", devDependencies "@vue/cli-plugin-babel": "^3.8.0", "@vue/cli-plugin-eslint": "^3.8.0", "@vue/cli-plugin-unit-mocha": "^3.8.0", "@vue/cli-service": "^3.8.0",
以下のようなディレクトリ構成となっています
root/ ├ dist/ │ ├ hoge/ │ │ └ index.html │ ├ fuga/ │ │ └ index.html │ ├ foo/ │ │ └ index.html ├ src/ # vueのリソース ├ public/ # vueのテンプレートファイル ├ node_modules/ ... └ vue.config.js
たとえば現在のドメインが https://sample.vue.co.jp
、パスが hoge
の場合、https://sample.vue.co.jp/hoge
にてリロードすると、404とならないこと。
パスが fuga
の場合、https://sample.vue.co.jp/fuga
にてリロードしても、404とならないこと。
パスが fuga/fuga01
の場合、https://sample.vue.co.jp/fuga/01
にてリロードしても、404とならないこと。
該当のソースコード
<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^(hoge.*)$ dist/hoge[QSA,L] RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^(fuga.*) dist/fuga/index.html [QSA,L] RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^(foo.*)$ dist/foo/index.html [QSA,L] </IfModule>
試したこと
RewriteRule ^(.*) dist/fuga/index.html [QSA,L]
のようにすれば、リロードが行われても、問題なくうごきますが、すると foo
では想定外(fuga)のページに遷移されてしまうため、それは行いたくない。
いろいろ試したのですが、解決策が見つからないためご教示願います。
あなたの回答
tips
プレビュー