使用 Docker Compose 測試含 Sub-Path 的 Vue | 點燈坊

實務上 Vue 不見得都放在 Domain 的 Root-path，而是放在 Sub-path，在 Vue CLI、Nginx 與 docker-compose.yml 都必須特別設定。

Version

Vue 2.6.11

PublicPath

Vue router 使用 hash mode 啟動在 Dev Server 於 http://localhost:8080/portal/#/。

Vue router 使用 hash mode 啟動在 docker compose 的 Nginx 於 http://localhost:8080/portal/#/。

Vue Config

vue.config.js

module.exports = {
  publicPath: '/portal/'
}

新增 vue.config.js，在 module.exports 內：

• publicPath：設定 portal 為 sub-path

Nginx Config

default.conf

server {
  listen       80;

  server_name  localhost;

  location  /portal/ {
      root   /usr/share/nginx/html;
      index  index.html index.htm;
      try_files $uri $uri/ /index.html;
  }
}

在 project 根目錄下建立 default.conf：

• 新增 location /portal/ 設定 sub-path

Docker Compose

docker-compose.yml

version: "3"
services:
  vue:
    image: nginx:alpine
    restart: always
    ports:
      - "7979:80"
    volumes:
      - ./dist:/usr/share/nginx/html/portal
      - ./default.conf:/etc/nginx/conf.d/default.conf

在 project 根目錄下建立 docker-compose.yml：

• image: nginx:alpine：使用 Nginx
• ports：
  • 7979:80：設定對外為 port 7979，對內為 port 80
• volumns：
  • ./dist:/usr/share/nginx/html/portal：將 Vue 的 dist 目錄對應到 Nginx 的 portal 目錄
  • ./default.conf:/etc/nginx/conf.d/default.conf：將 default.conf 對應到 Nginx 內部

NPM Script

"scripts": {
  "docker": "yarn build && docker compose up -d"
},

• docker：先執行 docker build，執行完後再執行 docker compose up -d

Conclusion

• 若要設定 sub-path，則 vue.config.js、default.conf、docker-compose.yml 三者都要設定

Reference

Vue CLI, publicPath