[Vue.js] 共用Domain Name 部屬多個vue專案

接續『[Vue.js] vue-router設定history mode移除網址的#』的內容，可以在web server裡部屬vue的專案，如果要共用同一個domain name，用不同的子目錄(subdirectory)來區分時，只要根據下面的步驟稍微調整你的專案，既不會影響原本的開發模式，也能在正式區讓多個專案同時運行。

假設兩個專案project-A、project-B分別為：
1. project-A: /var/www/project_a
http://my.project
2. project-B: /var/www/project_b
http://my.project/group/

所有project-B的URL，都會多一個 /group/ 的子目錄；反之，帶有 /group/ 的網址也會自動與project-B的路由進行比對。
project-A的設定方式不再說明，可以參考『[Vue.js] vue-router設定history mode移除網址的#』，下面講解project-B的設定方式。

Step1. vue-router

設定base

// src/router/index.js
 export default new Router({
   base: '/group/',
   mode: 'history',
   ...
 }

Step2. build參數

設定assetsPublicPath，請注意有兩個不同的key，須設定的是build的assetsPublicPath。

// config/index.js
 module.exports = {
   dev: {
       ...
   },
   build: {
     assetsPublicPath: '/group',
     ...
   }
 }

Step3. build

npm run build

取得目錄dist/底下的檔案，搬到目的的資料夾/var/www/project_b。

Step4. 建立.htaccess

將檔案放到/var/www/project_b，也就是project-B相同的目錄。

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . group/index.html [L]
</IfModule>

Step5. Apache Config

將檔案放到/var/www/html/project_b，也就是project-B相同的目錄。

<VirtualHost *:443>
  ServerName my.project
  DocumentRoot /var/www/project_a
  DirectoryIndex index.html
  <Directory /var/www//project_a>
    AllowOverride all
  </Directory>
  
  Alias /group /var/www/project_b
  <Directory /var/www/project_b>
    AllowOverride All
  </Directory>
</VirtualHost>

sudo systemctl restart apache2

請記得重啟apache2，設定就完成囉！