URL: https://www.overclockers.at/coding-stuff/django-vue-script-file-locations_255143/page_1 - zur Vollversion wechseln!
ich arbeite an einem django projekt mit vue.js frontend und bin auf ein problem gestoßen:
wenn ich das vue frontend für production baue
und den django server starte funktioniert alles wie erwartet. die scripts werden aus dem static ordner vom django projekt geladen, im quellcode der seite stehtCode:npm run build
Code:<link type="text/css" href="/static/vue/css/chunk-vendors.css" rel="stylesheet"> <script type="text/javascript" src="/static/vue/js/chunk-vendors.js"></script> <script type="text/javascript" src="/static/vue/js/main.js"></script> <link type="text/css" href="/static/vue/css/main.css" rel="stylesheet">
starte, wird das frontend nicht mehr angezeigt weil die vue scripte nicht gefunden wurden:Code:npm run serve
(aus der firefox konsole). im quellcode stehtCode:Laden fehlgeschlagen für das <script> mit der Quelle "http://127.0.0.1:8000/static/vue/chunk-vendors.js". Laden fehlgeschlagen für das <script> mit der Quelle "http://127.0.0.1:8000/static/vue/main.js".
afaik sollten hier die skripte aus dem frontend ordner geladen werden. ich finde im frontend ordner aber keinen pfad der dazu passen würde, und auch keine möglichkeit diesen pfad anzugeben.Code:<script type="text/javascript" src="/static/vue/chunk-vendors.js"></script> <script type="text/javascript" src="/static/vue/main.js"></script>
Das kann jetzt natürlich an einigem liegen.
serve startet meines Wissens ja nur einen Node Server in dem cwd. Wie ist denn die Filestruktur in dem Projekt?
Code:project. ├───frontend │ [...] │ └───server [...]
Code:frontend. │ .browserslistrc │ .eslintrc.js │ .gitignore │ babel.config.js │ package-lock.json │ package.json │ postcss.config.js │ vue.config.js │ webpack-stats.json │ webpack.config.js │ ├───public │ favicon.ico │ index.html │ ├───src │ │ App.vue │ │ main.js │ │ │ ├───assets │ │ logo.png │ │ logo.svg │ │ │ ├───components │ │ │ Footer.vue │ │ │ Header.vue │ │ │ HelloWorld.vue │ │ │ TestPage.vue │ │ │ │ │ ├───comps │ │ │ │ Requirements.vue │ │ │ │ │ │ │ ├───customs │ │ │ │ BBBtnIcon.vue │ │ │ │ │ │ │ └───NewProcess │ │ │ 4_ConfirmData.vue │ │ │ ChooseProcess.vue │ │ │ PreProcessInfo.vue │ │ │ StartProcess.vue │ │ │ │ │ ├───D3Tree │ │ │ horizontalTreeDiagram.js │ │ │ readDependencies.js │ │ │ Tree.vue │ │ │ │ │ ├───pages │ │ │ ApexChartTest.vue │ │ │ Auth.vue │ │ │ Dashboard.vue │ │ │ Files.vue │ │ │ Icons.vue │ │ │ MultipleProcess.vue │ │ │ NewProcess.vue │ │ │ ProcessGraph.vue │ │ │ Traceability.vue │ │ │ Users.vue │ │ │ ViewData.vue │ │ │ ViewProcessData.vue │ │ │ VueChartJSTest.vue │ │ │ │ │ └───tests │ │ FormTest.vue │ │ InputComponent.vue │ │ │ ├───plugins │ │ vuetify.js │ │ │ ├───services │ │ api.service.js │ │ config.js │ │ config_template.js │ │ │ ├───store │ │ │ actions.type.js │ │ │ app.js │ │ │ index.js │ │ │ mutations.type.js │ │ │ │ │ └───modules │ │ analyses.js │ │ brt.js │ │ newProcess.js │ │ template_module.js │ │ traitids.js │ │ uploads.js │ │ │ └───views │ About.vue │ Home.vue │ ├───static │ │ babel.config.js │ │ package-lock.json │ │ package.json │ │ postcss.config.js │ │ README.md │ │ vue.config.js │ │ webpack-stats.json │ │ webpack.config.js │ │ │ ├───dist │ │ │ favicon.ico │ │ │ index.html │ │ │ │ │ └───static │ │ ├───css │ │ │ chunk-vendors.746f70f3.css │ │ │ │ │ └───js │ │ chunk-vendors.25f013fc.js │ │ chunk-vendors.25f013fc.js.map │ │ vue_app_01.2f6e7cf4.js │ │ vue_app_01.2f6e7cf4.js.map │ │ vue_app_02.41c288f8.js │ │ vue_app_02.41c288f8.js.map │ │ │ └───dist_ │ │ [...] │ └───tests │ README.md │ SanityTest.spec.js │ ├───components │ BoolInput.spec.js │ └───unit .eslintrc.js example.spec.js jest.conf.js
Code:server. │ .coveragerc │ .gitignore │ conf.py │ database_router.py │ db_bak.sqlite3 │ index.rst │ logs │ make.bat │ Makefile │ manage.py │ routers.py │ run.bat │ schema.json │ testcoverage.sh │ tree.txt │ urls.py │ wsgi.py │ __init__.py │ ├───public │ ├───admin │ │ ├───css │ │ │ │ autocomplete.css │ │ │ │ base.css │ │ │ │ changelists.css │ │ │ │ dashboard.css │ │ │ │ fonts.css │ │ │ │ forms.css │ │ │ │ login.css │ │ │ │ responsive.css │ │ │ │ responsive_rtl.css │ │ │ │ rtl.css │ │ │ │ widgets.css │ │ │ │ │ │ │ └───vendor │ │ │ └───select2 │ │ │ LICENSE-SELECT2.md │ │ │ select2.css │ │ │ select2.min.css │ │ │ │ │ ├───fonts │ │ │ LICENSE.txt │ │ │ README.txt │ │ │ Roboto-Bold-webfont.woff │ │ │ Roboto-Light-webfont.woff │ │ │ Roboto-Regular-webfont.woff │ │ │ │ │ ├───img │ │ │ │ [...] │ │ │ │ │ │ │ └───gis │ │ │ move_vertex_off.svg │ │ │ move_vertex_on.svg │ │ │ │ │ └───js │ │ │ [...] │ │ │ │ │ ├───admin │ │ │ DateTimeShortcuts.js │ │ │ RelatedObjectLookups.js │ │ │ │ │ └───vendor │ │ ├───jquery │ │ │ jquery.js │ │ │ jquery.min.js │ │ │ LICENSE.txt │ │ │ │ │ ├───select2 │ │ │ │ LICENSE.md │ │ │ │ select2.full.js │ │ │ │ select2.full.min.js │ │ │ │ │ │ │ └───i18n │ │ │ [...] │ │ │ │ │ └───xregexp │ │ LICENSE.txt │ │ xregexp.js │ │ xregexp.min.js │ │ │ ├───codemirror │ │ [...] │ │ │ ├───htmlcov │ │ [...] │ │ │ ├───material │ │ [...] │ │ │ ├───rest_framework │ │ [...] │ ├───settings │ │ develop.py │ │ develop_template.py │ │ prod.py │ │ __init__.py │ │ │ ├───static │ ├───codemirror │ │ init.js │ │ │ ├───htmlcov │ │ [...] │ │ │ ├───imgs │ │ │ └───vue │ │ favicon.ico │ │ index.html │ │ │ ├───css │ │ chunk-vendors.css │ │ main.css │ │ │ ├───fonts │ │ materialdesignicons-webfont.eot │ │ materialdesignicons-webfont.ttf │ │ materialdesignicons-webfont.woff │ │ materialdesignicons-webfont.woff2 │ │ │ └───js │ chunk-vendors.js │ main_einlaufen.js │ main.js │ ├───templates │ │ base.html │ │ base_vue.html │ │ index.html │ │ main.html │ │ style.css │ │ │ ├───admin │ │ base.html │ │ base_site.html │ │ change_form.html │ │ │ └───registration │ login.html │ ├───uploads │ │ DEMOUPLOAD.txt │ │ DEMOUPLOAD_LhneCKc.txt │ │ DEMOUPLOAD_ZzdPXTd.txt │ ├───utilities │ │ admin.py │ │ apps.py │ │ models.py │ │ tests.py │ │ urls.py │ │ views.py │ │ __init__.py │ │ │ ├───migrations │ │ __init__.py │ │ │ ├───utils │ │ form_utils.py │ │ __init__.py │ │ │
richtig: https://cli.vuejs.org/guide/cli-ser...i-service-serveZitat aus einem Post von illserve startet meines Wissens ja nur einen Node Server in dem cwd.
Code:config.devServer .public("http://localhost:8082") .host("localhost") .port(8080) .hotOnly(true) .watchOptions({ poll: 1000 }) .https(false) .headers({ "Access-Control-Allow-Origin": ["*"] }); }
Wo startest du den serve prozess denn? Ich bild mir ein dass du in dem "public" property ja eigentlich das root directory des servers angeben solltest, oder?
im frontend ordner. das public property sollte afaik passen, in einem schnell erstellten anderen django-vue projekt sind die settings gleich.
edit: der port im public property sollte wohl 8080 sein. hab das geändert, leider habe ich noch immer das gleiche problem.
Startest eh immer erst den Frontend-Server? Sonst findet der Application Server den entry point nicht und served ein 404, selbst wenn das Frontend mittlerweile kompiliert sein sollte.
ja, starte immer erst den frontend server.
overclockers.at v4.thecommunity
© all rights reserved by overclockers.at 2000-2025