Render dist file (of Vuejs) through Django

Question

Trying to render vue js build (index.html) in Django its working fine but the problem is that when i give any route to that url than i get page not found from vue.

This working fine

url(r'^$', TemplateView.as_view(template_name="index.html"), name='whatever'),

And this is not, giving page not found error of vue

url(r'^website/', TemplateView.as_view(template_name="index.html"), name='whatever'),

i am directly calling template of vue js in urls.py please check this url(r'^$', TemplateView.as_view(template_name="index.html"), name='whatever'), — Fayyaz Hussain, Jul 10 '20 at 13:46
Try `url(r'^website/$', TemplateView.as_view(template_name="index.html"), name='whatever'),` — Vincent, Jul 10 '20 at 13:53

score 1 · Accepted Answer · answered Jul 11 '20 at 06:04

Hi I got a solution to the problem you have to set the default route in your router to set it redirection to the specific path

code for your router.js in vue project

new Router({
  mode: 'History',
  base: '/app'
  routes: [
   {
     path: '/',
     name: 'name',
     component: ComponentName
   }
  ]
})

and also mention the same URL name in you API in Django

urlpatterns = [
  url(r'^admin/', admin.site.urls),
  url(r'^api-token-auth/', obtain_jwt_token),
  url(r'^.*$/app', views.home),
]

for more detailed conversation refer to this answer

Render dist file (of Vuejs) through Django

1 Answers1