Question

短版当我访问localhost时，我的django / vue应用程序可以正常显示。但是，当我单击链接时，不是因为我的webpack和localhost/about设置而被带到http://localhost/http:/0.0.0.0:8080/about，而是被带到vue.config.js。

详细信息 我有一个应用程序（在docker-compose中）在后端运行Django，在前端运行Vue。该应用程序使用django-webpack-loader和webpack-bundle-tracker来在Django中呈现该应用程序。

# Django settings.py
WEBPACK_LOADER = {
    "DEFAULT": {
        "CACHE": DEBUG,
        "BUNDLE_DIR_NAME": "/bundles/",
        "STATS_FILE": os.path.join(FRONTEND_DIR, "webpack-stats.json"),
    }
}

# Django urls.py
from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin
from django.urls import path, re_path
from django.views.generic import TemplateView

urlpatterns = [
    path("admin/", admin.site.urls),
    re_path("^.*$", TemplateView.as_view(template_name="application.html"), name="app"),
]
if settings.DEBUG:
    urlpatterns = (
        urlpatterns
        + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
        + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
    )

<!-- Template -->
{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/favicon.ico">
    <title>My Website</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but this application doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
        <div id="app">
             <app></app>
         </div>{% render_bundle 'app' %}<!-- built files will be auto injected -->
  </body>
</html>

// vue.config.js
const BundleTracker = require("webpack-bundle-tracker");

module.exports = {
  publicPath:
    process.env.NODE_ENV === "production"
      ? "https://example.com"
      : "http://0.0.0.0:8080/",
  outputDir: "./dist/",

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

    config
      .plugin("BundleTracker")
      .use(BundleTracker, [{ filename: "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: 500 })
      .https(false)
      .headers({ "Access-Control-Allow-Origin": ["*"] });
  }
};

启动应用程序时，访问localhost可以正常工作，但是如果我尝试单击其中一个vuetify链接，它将带我进入http://localhost/http:/0.0.0.0:8080/about（大概是因为这是我指定的URL作为开发环境的publicPath）。如果我用http://0.0.0.0替换localhost，则会得到相同的不希望的重定向到http://0.0.0.0/http:/0.0.0.0:8080/。但是，如果我访问localhost:8080，则可以浏览该应用程序，并单击链接指向其正确位置（例如localhost：8080 / about）。

我尝试删除publicPath的配置，但是当我这样做时Django应用程序无法为vue应用程序提供服务：该应用程序在应用程序中加载了一个包含SyntaxError: expected expression, got '<'的JavaScript错误的空白页面.js。我认为这是因为它试图加载http://0.0.0.0/app.js并收到与http://0.0.0.0相同的模板响应。

所以我认为我有几种选择： 1）我是否应该保留默认的vue.config.js publicPath选项，并将django配置为从正确的位置提供app.js（如果是，该位置是什么？） 2）是否可以将vue路由器配置为使用与publicPath中指定的根URL不同的根URL？

如果无法进行此配置，我可以切换到在Nuxt而不是Django中进行SSR，但是我很好奇要了解更多有关此处正在发生的配置问题的信息。

Answer 1

您可以将vue路由器配置为使用其他根URL。只需替换router.js

base: process.env.BASE_URL,

使用

base: '/',

Answer 2

我相信通过添加即可解决

mode: "history",

到您的router.js文件。

Django Webpack Loader中断Vue路由器链接

2 个答案: