上下文路径的 vue caddy 规则

Question

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

我正在使用 caddy 进行部署。

但是当我使用 publicpath 时，我选择了一个有 /path 的路由器配置，它给我 404。它在本地工作正常；但在 caddy 上不工作。

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
})

我只使用默认的 caddy 配置，如下所示

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 网络根目录中的 univ 目录。

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

上下文路径的 vue caddy 规则

vue caddy rule for context path

vue.js

caddy

Vue 设置