django + vue: script file locations
wergor 30.01.2020 - 12:52 2257 6
wergor
connoisseur de mimi
|
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 npm run build
und den django server starte funktioniert alles wie erwartet. die scripts werden aus dem static ordner vom django projekt geladen, im quellcode der seite steht <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">
wenn ich aber stattdessen den dev server mit npm run serve
starte, wird das frontend nicht mehr angezeigt weil die vue scripte nicht gefunden wurden: 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".
(aus der firefox konsole). im quellcode steht <script type="text/javascript" src="/static/vue/chunk-vendors.js"></script>
<script type="text/javascript" src="/static/vue/main.js"></script>
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.
|
ill
...
|
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?
|
wergor
connoisseur de mimi
|
project.
├───frontend
│ [...]
│
└───server
[...]
frontend: 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
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
│ │
│
serve startet meines Wissens ja nur einen Node Server in dem cwd. richtig: https://cli.vuejs.org/guide/cli-ser...i-service-servedie devServer config ist auch recht unspektakulär: config.devServer
.public("http://localhost:8082")
.host("localhost")
.port(8080)
.hotOnly(true)
.watchOptions({ poll: 1000 })
.https(false)
.headers({ "Access-Control-Allow-Origin": ["*"] });
}
Bearbeitet von wergor am 30.01.2020, 16:22
|
ill
...
|
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?
|
wergor
connoisseur de mimi
|
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.
Bearbeitet von wergor am 30.01.2020, 14:53
|
Obermotz
Fünfzylindernazi
|
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.
|
wergor
connoisseur de mimi
|
ja, starte immer erst den frontend server.
|
Anmeldung