Python 在webpack和django中找不到静态文件

问题是我可以在浏览器上访问应用程序，但不能访问静态资产（js、jsx和图像）

我正在使用的技术：

django-webpack-loader 0.2.4
React 0.14
Django 1.8.5
Python 2.7

静态文件的Django设置的一部分：

103 # Static files (CSS, JavaScript, Images)
104 # https://docs.djangoproject.com/en/1.8/howto/static-files/
105 
106 STATIC_URL = '/static/'
107 STATICFILES_DIRS = (
108     os.path.join(BASE_DIR, 'assets'),
109 )
110 
111 WEBPACK_LOADER = {
112     'DEFAULT': {
113         'BUNDLE_DIR_NAME': 'bundles/',
114         'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
115     }
116 }

webpack.config.js文件：

  4 // Dependencies
  5 var path = require('path')
  6 var webpack = require('webpack')
  7 var BundleTracker = require('webpack-bundle-tracker')
  8 
  9 module.exports = {
 10     // The base directory (absolute path) for resolving the entry option.
 11     context: __dirname,
 12 
 13     entry: './assets/js/index',
 14 
 15     output: {
 16         // Where the compiled bundle to be stored.
 17         path: path.resolve('./assets/bundles/'),
 18         // Naming convention webpack should use.
 19         filename: '[name]-[hash].js'
 20     },
 21 
 22     plugins: [
 23         // Where webpack stores data about bundles.
 24         new BundleTracker({filename: './webpack-stats.json'}),
 25         // Makes jQuery available in every module.
 26         new webpack.ProvidePlugin({
 27             $: 'jquery',
 28             jQuery: 'jquery',
 29             'window.jQuery': 'jquery'
 30         })
 31     ],
 32 
 33     module: {
 34         loaders: [
 35             // A regexp that tells webpack user the following loaders on all
 36             // .js and .jsx files.
 37             {test: /\.jsx?$/,
 38                 exclude: /ndoe_modules/,
 39                 loader: 'babel-loader',
 40                 query: {
 41                     presets: ['react']
 42                 }
 43             },
 44             // use ! to chain loaders
 45             { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
 46             {test: /\.css$/, loader: 'style-loader!css-loader'},
 47             // Inline base64 URLs for <=8k images, direct URLs for the rest.
 48             {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
 49         ]
 50     },
 51 
 52     resolve: {
 53         // Where webpack looks for modules.
 54         modulesDirectories: ['node_modules'],
 55         // Extensions used to resolve modules.
 56         extensions: ['', '.js', '.jsx']
 57     }
 58 }

Django项目的层次结构：

my_project/
├── Dockerfile
├── api
├── assets
├── my_project
├── db.sqlite3
├── manage.py
├── node_modules
├── package.json
├── requirements.txt
├── static
├── templates
├── webpack-stats.json
└── webpack.config.js

有两台服务器运行Nginx t01和t02。t01代表代理，t02代表Django项目所在地。代理服务器看起来很好，因为url在浏览器上工作，只有静态文件找不到（404错误）

我在服务器上手动执行静态文件绑定，因为将生成包含绝对路径信息的

webpack stats.json

文件

但是，此项目在我的本地计算机上正常运行

[编辑]：

我找到了一个解决方案，只需将它添加到

urlpatterns

---

]+static（settings.static\u URL，document\u root=settings.static\u root）

在HTML页面中，您是否加载并呈现了捆绑包？ 这应该在您的入口点Django模板中

{% load render_bundle from webpack_loader %}
{% render_bundle 'app' %}

您还需要publicPath来匹配Django中的静态文件设置。在webpack.config.js中设置：

output: {
    path: path.resolve('assets/bundles/'),
    publicPath: '/static/bundles/',
    filename: "[name]-[hash].js",
},

---

如果在运行（Django）测试时遇到此问题，请确保已构建webpack捆绑包：

./node_modules/.bin/webpack --watch --progress --config webpack.config.js --colors

然后删除所有

.pyc

文件以清除操作过时的测试

find -name "*.pyc" -delete

---

在此之后，测试不应再抱怨webpack无法找到有问题的捆绑包。

我做了某些更改，并将webpack捆绑包跟踪器从alpha降级到0.4.3 你可以在这里找到

或使用npm i网页包包进行安装-tracker@0.4.3

在前端创建vue.config.js文件

const BundleTracker = require('webpack-bundle-tracker');

module.exports = {
    publicPath: "http://0.0.0.0:8080",
    // output dir default buldle file ocation in dist
    outputDir: "./dist/",

    chainWebpack: config => {
        config.optimization.splitChunks(false)

        config.plugin('BundleTracker').use(BundleTracker, [
            {
                // filename: './webpack-stats.json'
                filename: './webpack-stats.json'
            }
        ])

        config.resolve.alias.set('__STATIC__', 'static')

        config.devServer
            .public('http://0.0.0.0:8080')
            .host('0.0.0.0')
            .port(8080)
            .hotOnly(true)
            .watchOptions({poll: 1000})
            .https(false)
            .headers({'Access-Control-Allow-Origin': ['\*']})
    }
};

在django settings.py文件中

INSTALLED_APPS = [
    'webpack_loader',
]

TEMPLATES = [
{
'DIRS': [
            str(BASE_DIR.joinpath('templates'))
        ],
}
]

WEBPACK_LOADER = {
    'DEFAULT': {
        'CACHE': not DEBUG,
        'BUNDLE_DIR_NAME': 'webpack_bundles/', # must end with slash
        'STATS_FILE': str(BASE_DIR.joinpath('frontend', 'webpack-stats.json')),
        'POLL_INTERVAL': 0.1,
        'TIMEOUT': None,
        'IGNORE': [r'.+\.hot-update.js', r'.+\.map'],        
    }
}

将这些配置添加到settings.py文件的底部

INSTALLED_APPS = [
    'webpack_loader',
]

TEMPLATES = [
{
'DIRS': [
            str(BASE_DIR.joinpath('templates'))
        ],
}
]

WEBPACK_LOADER = {
    'DEFAULT': {
        'CACHE': not DEBUG,
        'BUNDLE_DIR_NAME': 'webpack_bundles/', # must end with slash
        'STATS_FILE': str(BASE_DIR.joinpath('frontend', 'webpack-stats.json')),
        'POLL_INTERVAL': 0.1,
        'TIMEOUT': None,
        'IGNORE': [r'.+\.hot-update.js', r'.+\.map'],        
    }
}

index.html如下所示

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Django Vue-3X iNTEGRATION</title>
</head>
<body>
    <h1>HELLO FROM DJANGO</h1>

    <div id="app">
        <h1>HELLO FROM Vue</h1>
    </div>

    {% render_bundle 'app' %}
</body>
</html>

{%loader\u bundle from webpack\u loader%}
Django Vue-3X集成
来自DJANGO的你好
来自Vue的你好
{%render_bundle'应用程序'%}

这些解决了我的问题。

---

另外，我还希望获得有关将最新版本的webpack bundle tracker与vueCli一起使用的帮助。此项目在我的本地计算机上正常运行。我在index.html文件中添加了这些行。要设置的公共路径在哪里？@ChesterL publicPath在webpack.config.js中设置。在本地服务器上，您应该看到位于：/static/bundles/[name]-[hash].jsChester的bundle-似乎是代理配置错误。也许发布那些配置来获得更多帮助。这对我很有用。它生成了wepback-bundle.json。然而，它也锁定了，我最终需要用Cntrl/C将其打破。然后Django开始工作。谢谢