Why is Django displaying "Page Not Found 404"?

M

Mike2018-07-05 13:08:21

Vue.js

Mike, 2018-07-05 13:08:21

Why is Django displaying "Page Not Found 404"?

I am using django-webpack-loader, vue.js. Installed vue-router. I have three links in a vue app. I go to the profile link (in the vue app). Everything is working. But when I hit "F5" in the component, I get:
Page not found (404)
1. [name='home']
2. admin/
3. ^static\/(?P.*)$
The current path, profile, didn 't match any of these.
I kind of understand that Django does not know about vue.js routings, but how can I tell him about it?
urls.py(root)

urlpatterns = [
    path('', TemplateView.as_view(template_name='index.html'), name='home'),
    path('admin/', admin.site.urls),
]
urlpatterns += staticfiles_urlpatterns()

settings.py

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'public')

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'dist'),
)

WEBPACK_LOADER = {
    'DEFAULT': {
        'CACHE': not DEBUG,
        'BUNDLE_DIR_NAME': '',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
        'POLL_INTERVAL': 0.1,
        'TIMEOUT': None,
        'IGNORE': ['.+\.hot-update.js', '.+\.map']
    }
}
TEMPLATES: [
        ... ... ...
       'DIRS': [os.path.join(BASE_DIR)],
        ... ... ...
]

index.html (also in the root of the project)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>demo</title>
  </head>
  <body>
    {% load render_bundle from webpack_loader %}
    <div id="app">
      <app></app>
    </div>
    {% render_bundle 'main' %}
  </body>
</html>

webpack.config.js

var path = require('path')
var webpack = require('webpack')

var BundleTracker = require('webpack-bundle-tracker')
var WriteFilePlugin = require('write-file-webpack-plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist/'),
    filename: 'bundle.js'
  },
  plugins: [
    new BundleTracker({filename: 'webpack-stats.json'}),
    new WriteFilePlugin()
    ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      // '__STATIC__': resolve('static')
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

PS: issue resolved.
replace in urls.py

path('', TemplateView.as_view(template_name='index.html'), name='home'),

on the

re_path(r'^.*$', TemplateView.as_view(template_name='index.html'), name='home'),