Vue + Laravelでサブディレクトリに展開する際にやったこと。

Laravel

Apacheのhttpd.confにてバーチャルホスト設定にAliasを書く

<VirtualHost *:80>
        ServerAdmin webmaster@localhost
        ServerName www.example.com
        DocumentRoot /home/vagrant/htdocs

        Alias /subdirectory_name "/home/vagrant/laravelapp/public"

        <Directory "/home/vagrant/laravelapp/public">
        Options FollowSymLinks
        AllowOverride All
        Require all granted
        </Directory>

こんな感じでAlias

Laravelのpublic/.htaccessのRewriteを書き直す。

    RewriteEngine On
    RewriteBase /subdirectory_name #追加

...
    # RewriteRule ^ %1 [L,R=301] # コメントアウト
    RewriteRule ^(.*)/$ /subdirectory_name/$1 [L,R=301] #追加

bladeテンプレートの{{ mix(/js/foo.js) }} を描き直す

{{ mix(/js/foo.js) }}

を

{{ asset(mix(/js/foo.js)) }}

に変更。cssも。

Vuejsの変更

routerにbaseを入れる

export default new Router({
    mode: 'history',
    base: '/subdirectory_name/',
    routes: [
        {

axiosのbaseUrlを変更する。

これ、なんかいい方法ないのかな？とは思うけど、とりあえず。

import Vue from 'vue';
import "es6-promise/auto";
import VueRouter from 'vue-router';
import router from './router.js';
axios.defaults.baseURL = '/subdirectory_name';
window.Vue = require('vue');
Vue.use(VueRouter);

って感じで、axios.defaults.baseURL を設定する。