Использую django-webpack-loader, vue.js. Установил vue-router. Имею три ссылки в приложении vue. Перехожу на ссылку profile(в приложении vue). Всё работает. Но когда жмякаю "F5" в компоненте, получаю :
Page not found (404)
1. [name='home']
2. admin/
3. ^static\/(?P.*)$
The current path, profile, didn't match any of these.
Я вроде понимаю что Django не знает про роутинги vue.js, а как я могу ему про это сказать?
urls.py(root) urlpatterns = [
path('', TemplateView.as_view(template_name='index.html'), name='home'),
path('admin/', admin.site.urls),
]
urlpatterns += staticfiles_urlpatterns()
settings.pySTATIC_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(тоже в корне проекта)<!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.jsvar 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: вопрос решен.
заменить в
urls.pypath('', TemplateView.as_view(template_name='index.html'), name='home'),
на
re_path(r'^.*$', TemplateView.as_view(template_name='index.html'), name='home'),
