Question

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

我正在使用caddy进行部署。

但是当我使用publicpath时，我选择了一个带有/ 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网络根目录中的univ目录中。

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

上下文路径的Vue Caddy规则

1 个答案:

Vue设置