Question

当Django URL为/时，我已经能够在Django模板中呈现Vue应用程序。但是在这种情况下，我们希望Vue页面的Django网址为/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上运行？

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

0 个答案: