vue.js - 使用 Webpacker 从 Rails 5 中的子路径提供 Vue.js 应用程序

Question

我想要实现的是将 Vue 3 应用程序添加到现有的 Rails 应用程序中。因此，在加载路由 /spa/* 之前，我的应用程序将是典型的 Rails 应用程序。在这种情况下，Rails 的 Controller 将提供一个依赖于 Webpack 提供的 JS 的布局...

首先，我将路由 /spa/ 添加到我的 routes.rb 中，以便始终将其解析为 Controller ，该 Controller 提供使用 javascript_pack_tag

然后，我设法在我的 Rails 5.2 rails 应用程序中安装和设置 Webpacker，它似乎工作正常，因为我已经构建了一个带有 Vue 路由器和一些组件的简单应用程序单击链接时正确呈现。好吧，差不多……

问题在于我在路径 /spa/ 而不是根 / 下提供 Vue 应用程序。当我加载 /spa/ URL 时，会显示我的 header 组件(包含链接)，但在我单击 Vue 链接之前不会呈现初始组件(Vue 路由器中的组件)。组件已呈现，但 URL 从 /spa/ 更改为 /q1。显然，如果我们重新加载浏览器，路由不是由 Vue 控制的，而是由 Rails 控制的

我想要实现的是告诉 Webpack(er) 和 Vue 在任何 Vue 路由器链接之前添加 /spa/。

<nav id="nav">
      <router-link to="/">Question 1</router-link>
      <router-link to="/q2">Question 2</router-link>
</nav>

我知道我可以将 /spa 硬编码到我正在使用的每个链接，但这感觉很脏 :D

我的 Vue 路由器:

import { createWebHistory, createRouter } from "vue-router";
import Question1 from "@/vue/views/Question1.vue";
import Question2 from "@/vue/views/Question2.vue";
// import About from "@/views/About.vue";

const routes = [
  {
    path: "q1",
    name: "Question1",
    component: Question1,
  },
  {
    path: "q3",
    name: "Question2",
    component: Question2,
  },
  { 
    path: "", 
    redirect: { name: 'Question1' }
  }
];

const router = createRouter({
  history: createWebHistory(),
  // publicPath: '/spa',
  base: '/spa/',
  routes,
});

export default router;

根据 Vue 3 文档，通过将 base 参数添加到 Router 配置中应该可以很容易地解决这个问题，但是它不起作用:/publicPath 也不是

我还在某个地方发现，对于 Webpack 和 Vue，可以通过将路径添加到 vue.config.js 来解决这个问题，但是使用 Webpacker gem 我不确定该怎么做。

问题是:如何让我的 Vue 应用程序在调用路由 /spa/ 时获得服务，就像 /spa/ 不存在一样？

最终编辑

跳转到@Excalibaard 的回答:)

在我的例子中，问题是我使用的 Vue router v4 与您通常在搜索 Router 文档时看到的语法不同。

在路由器 v3 中，base: 是传递给 createRouter() 函数的对象的属性

在 v4 中，base 是提供给 createWebHistory("the-base-value")

的参数

所以，我的解决方案是

const router = createRouter({
  mode:history,
  history: createWebHistory( '/spa/' ),
  routes,
});

Answer 1

您正在使用 ~3.0 语法。

• 在 vue-router 3.0 中，您可以通过 new Router 实例化一个路由器。您提供一个 base option到新的 Router 实例。
• 在 vue-router 4.0 中，您可以通过 createRouter 函数执行此操作。 routerOptions 不再接受 base 键； base 现在是 createHistory function 的可选参数.

试试这个:

const router = createRouter({
  history: createWebHistory('/spa/'),
  routes,
});

关于编辑 webpack 配置:

vue.config.js 是配置 Vue-CLI 的文件。这与 webpacker gem 冲突，因为它们都有自己的方式来管理 webpack 和部署链。对于 webpacker，您应该通过在 config/webpack 文件夹中导入自定义规则并合并到默认配置来编辑 webpack 配置。

---

编辑:原始(不正确)答案

您必须删除路径开头的斜线。开头的斜杠告诉 vue-router 作为绝对路径处理。

https://router.vuejs.org/api/#route-object-properties

https://router.vuejs.org/guide/essentials/nested-routes.html

我还建议您在扩展时使用 :to="{ name:'Foo' }" 来引用路径名，而不是直接引用路径，以防您更改路由路径.