上下文路径的 vue caddy 规则

Question

我按照 vue 教程部署上下文路径为 https://cli.vuejs.org/config/#publicpath 的应用程序 我使用了 vue 提供的 caddy 规则，因为我使用的是历史模式https://router.vuejs.org/guide/essentials/history-mode.html#caddy

我正在使用 caddy 进行部署。

但是当我使用公共路径时，我选择具有 /path 的路由器配置，它给我 404。它在本地工作正常；但在球童上不起作用。

Vue.use(Router)
const routes = [
  { path: '/', component: Home },
  { path: '/markabsent/:studentid/:techerid', component: StudentForm, props: true },
  { path: '/markpresent/:studentid/teacher/:techerid', component: StudentReturnForm},
  { path: '*', component: PageNotFound }
]

export default new Router({
  mode: 'history',
  base: 'univ',
  routes
})

我只使用下面的默认球童配置

0.0.0.0:2015

root /var/www/html

log stdout

errors stdout

rewrite {
    regexp .*
    to {path} /
}

当我访问 myapp.com/univ/markpresent/43/343 时。 ，它的 404。当我访问 ,myapp.com/univ/ 时，它会加载初始页面

Answer 1

尝试在您的rewrite 块上设置basepath 并重写为/univ/（您的应用的入口点）

rewrite /univ {
  r .*
  to {path} /univ/
}

_{免责声明：我不太了解 Caddy}

我创建了一个功能请求票，要求文档包含非 root publicPath 设置。

https://github.com/vuejs/vue-router/issues/2863

---

Vue 设置

我只是使用了默认的 vue create 应用程序和默认路由以及一些小的修改

// vue.config.js
module.exports = {
  publicPath: '/univ'
}

// src/router.js
export default new Router({
  mode: 'history',
  base: process.env.BASE_URL, // ? this gets the value from publicPath
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about/:studentid/:techerid',
      name: 'about',
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

在About.vue 模板中，我添加了

<pre>params = {{ $route.params }}</pre>

然后，我使用 npm run build 构建了应用程序，并将 dist 文件夹内容复制到了我的 Caddy Web 根目录中的 univ 目录。

在浏览器中直接打开http://localhost:2015/univ/about/332/2342显示如下