Back

linux - caddy - vue3 + caddy2 的部署

发布时间: 2022-10-10 02:02:00

refer to:
https://greenhathg.github.io/2020/07/21/Caddy2%E4%BD%BF%E7%94%A8%E5%9C%A8vue-history%E6%A8%A1%E5%BC%8F/

步骤：

1. 配置好域名的A记录
2. 在本地配置好vue项目（npm run build …）
3. 本地的vue 项目看起来是这样的： (假设它的路径是：/opt/app/vue3_lesson_demo/dist)

drwxrwxr-x 4 ubuntu ubuntu 4096 Oct 10 09:47 ./
drwxrwxr-x 8 ubuntu ubuntu 4096 Oct 10 08:54 ../
drwxrwxr-x 2 ubuntu ubuntu 4096 Oct 10 08:54 css/
-rw-rw-r-- 1 ubuntu ubuntu 4286 Oct 10 08:54 favicon.ico
-rw-rw-r-- 1 ubuntu ubuntu 769 Oct 10 08:54 index.html
drwxrwxr-x 2 ubuntu ubuntu 4096 Oct 10 08:54 js/

4. 并且该Vue项目使用了 history mode 的router: （ /opt/app/vue3_lesson_demo/src/router/index.js ）

import { createRouter, createWebHistory } from 'vue-router'
import Index from '@/views/Index'
const routes = [
    {
      path: '/',
      name: 'Index',
      component: Index
    },
    ..... 

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),   // 这里是关键
  routes
})

export default router

5. 修改Caddyfile:

vue.test-pns-link.com {
  encode zstd gzip
  root * /opt/app/vue3_lesson_demo/dist
  file_server
}

6. 重启Caddy即可。

Back