How to run compiled vue project in django
Charanjit Singh answer is correct and your 404 problem is not related to vueJs. Since you are not using a direct web server you are making it harder.
Also If your vue application implements vue-router in history mode that'll cause even more problems since you're not using neither nginx or apache.
My only approach for this is Haproxy that'll make your sub application handle those routes.
For example your app domain is myawesomedomain.com and your vue app is in myawesomedomain.com/myvueapp then you need to configure your Haproxy to let your vueapp handle all routes in myawesomedomain.com/myvueapp/*.
If you don't have a vue-router in your app then you need to place th vueapp folder in your deployed web folder and don't forget to add a routing rule for your html file (I don't know about Django but I did it with symfony and it is working)
Deployed||_vueapp ===> your compiled folder||_htmlFile ===> your html file
Finally, this is what I've been working on. I put the compiled index.html file from dist/index.html to templates/vueapp/index.html (django templates folder). The other files & folders is put inside static/ folder.
templates/vueapp/index.html=> the compiledhtmlfile.static/vueapp/(includes:css,js,fonts, etc). => the compiled vue static files.
my views.py;
from django.views.generic import TemplateViewclass VueAppView(TemplateView): template_name = 'vueapp/index.html'and my urls.py;
from django.contrib import adminfrom django.urls import (path, include)from my_app.views import (HomeTemplateView, VueAppView)urlpatterns = [ path('admin/', admin.site.urls), path('', HomeTemplateView.as_view()), path('vueapp/', VueAppView.as_view()),]also inside the vueapp/index.html. As we can see, I modified the source of /static/vueapp/ and linked to the static folder.
<!DOCTYPE html><html lang=id> <head> <meta charset=utf-8> <meta http-equiv=X-UA-Compatible content="IE=edge"> <meta name=viewport content="width=device-width,initial-scale=1"> <link rel=icon href=/static/vueapp/favicon.ico> <title>siap-ums</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"> <link href=/static/vueapp/css/chunk-01c619b4.ff54e24d.css rel=prefetch> <link href=/static/vueapp/css/chunk-308637dc.e4c5f763.css rel=prefetch> <link href=/static/vueapp/css/chunk-616b136f.404f3685.css rel=prefetch> <link href=/static/vueapp/js/app.876efdb8.js rel=preload as=script> <link href=/static/vueapp/js/chunk-vendors.2b11f5ad.js rel=preload as=script> <link href=/static/vueapp/css/chunk-vendors.a6a7bf01.css rel=stylesheet> </head> <body> <noscript><strong>We're sorry but siap-ums doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript> <div id=app></div> <script src=/static/vueapp/js/chunk-vendors.2b11f5ad.js></script><script src=/static/vueapp/js/app.876efdb8.js></script> </body></html>Every times the
vueapphave changes, I must compile it first and do the same step as above.