linux - caddy - vue3 + caddy2 的部署

访问量: 108

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即可。

订阅/RSS Feed

Subscribe