简短版本当我访问localhost我的 django/vue 应用程序呈现正常。但是当我点击一个链接时，而不是被带到localhost/about因为我的 webpack 和vue.config.js设置，我被带到了http://localhost/http:/0.0.0.0:8080/about。
详细信息我有一个应用程序在后端运行(在 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(大概是因为这是我指定为开发环境的 publicPath 的 URL(。如果我用http://0.0.0.0替换本地主机，我会得到同样不希望的重定向到 http://0.0.0.0/http:/0.0.0.0:8080/。但是，如果我访问localhost:8080我可以浏览该应用程序，链接单击到正确的位置(例如 localhost：8080/about(。
我尝试删除我的publicPath配置，但是当我这样做时，Django 应用程序无法提供 vue 应用程序：该应用程序加载了一个空白页面，其中包含 javascript 错误SyntaxError: expected expression, got '<'in app.js。我认为这是因为它试图加载http://0.0.0.0/app.js并接收与http://0.0.0.0相同的模板响应。
所以我想我有几个选择： 1(我是否应该保留默认的vue.config.jspublicPath选项，并将django配置为从正确的位置提供app.js(如果是这样，该位置是什么？ 2( 我可以配置 vue 路由器使用与publicPath中指定的根 URL 不同的根 URL 吗？
如果这种配置不可行，我可以切换到让 SSR 在 Nuxt 而不是 Django 中进行，但我很好奇了解更多关于这里正在起作用的配置问题。
您可以将 vue 路由器配置为使用不同的根 URL。 只需更换路由器.js
base: process.env.BASE_URL,
跟
base: '/',
我相信可以通过添加
来解决mode: "history",
到您的路由器.js文件。