历史模式下子页面上的 Django 和 Vue

Question

当 django url 为 / 时，我已经能够在 Django 模板中呈现 Vue 应用程序。但在这种情况下，我们希望 Vue 页面的 Django url 为 /dashboard。 / 只是一个静态 Django 页面。

问题是 Vue 页面正在显示，但路由不起作用。当我禁用历史记录模式时，路由工作正常，即使在 /dashboard/# 上也是如此。

所以在 urls.py 中我在末尾添加了这些行:

re_path(
    "^dashboard.*$",
    TemplateView.as_view(template_name="dashboard.html"),
    name="app",
),

在 router.ts 我有以下配置:

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: `${process.env.BASE_URL}`,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
    },
  ],
});

我还尝试设置 base: '${process.env.BASE_URL}/dashboard' 也没有用。

vue.config.js 具有以下设置:

const BundleTracker = require('webpack-bundle-tracker');

module.exports = {
  baseUrl: 'http://0.0.0.0:8080',
  outputDir: './dist/',

  chainWebpack: (config) => {
    config.optimization
      .splitChunks(false);

    config
      .plugin('BundleTracker')
      .use(BundleTracker, [{ filename: '../frontend/webpack-stats.json' }]);

    config.resolve.alias
      .set('__STATIC__', 'static');

    config.devServer
      .public('http://0.0.0.0:8080')
      .host('0.0.0.0')
      .port(8080)
      .hotOnly(true)
      .watchOptions({ poll: 1000 })
      .https(false)
      .headers({ 'Access-Control-Allow-Origin': ['\*'] });
  },
};

我可以做些什么来让 Vue 应用程序在 Django 中的 /dashboard 上运行？

Answer 1

不是专家，但这是我为让它工作所做的...

在您的路由器中将基础更新为 /dashboard/

export default new Router({
    mode: 'history',
    base: '/dashboard/',
    routes: [
    ...

在您的 urls.py 中，您必须添加两个 path...

path('', TemplateView.as_view(template_name='dashboard.html')),
path('<path:path>', TemplateView.as_view(template_name='dashboard.html')),

这将允许您的路由器使用/dashboard/而无需点击新的 url