Django/Nginx-未找到静态文件

我正在尝试部署一个非常简单的Django应用程序，它使用VueJS和使用Django Webpack Loader的Webpack Loader。我可以使用manage.py runserver和npm run server在本地运行我的应用程序，没有任何问题

现在我正尝试使用Gunicorn和Nginx将这个简单的应用程序部署到DigitalOcean。问题是，虽然我可以看到django呈现的标准模板，但我的Vue文件没有加载，而且我只收到了很多错误，看起来好像没有检索到静态文件夹，尽管我有一个静态目录：

GET http://URL/static/vue/js/chunk-vendors.js net::ERR_ABORTED 404 (Not Found)
GET http://URL/static/vue/js/index.js net::ERR_ABORTED 404 (Not Found)

应用程序的完整代码在这里，它不是我的，我只是运行一个简单的示例开始。我的

static

目录位于django\u vue\u mpa>static

有人能帮我吗

我确保使用npm run build构建用于生产的前端，并使用manage.py collectstatic收集静态文件，但仍然出现错误。任何形式的建议都将不胜感激

我的Nginx配置：

server {
    listen 80;
    server_name http://MYURL/;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /django-vue-mpa/static;
    }

    location / {
        include proxy_params;
        proxy_pass http://unix:/django-vue-mpa/django-vue-mpa.sock;
    }
}

My

vue.config.js

：

const BundleTracker = require("webpack-bundle-tracker");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;


const pages = {
    "stopwatch": {
        entry: "./src/stopwatch.js",
        chunks: ["chunk-moment", "chunk-vendors"],
    },
    "index": {
        entry: "./src/index.js",
        chunks: ["chunk-vendors"],
    },
    'vue_app_01': {
        entry: './src/main.js',
        chunks: ['chunk-vendors']
    },
    'vue_app_02': {
        entry: './src/newhampshir.js',
        chunks: ['chunk-vendors']
    },
}

module.exports = {
    pages: pages,
    filenameHashing: false,
    productionSourceMap: false,
    publicPath: process.env.NODE_ENV === 'production'
        ? 'static/vue'
        : 'http://localhost:8080/',
    outputDir: '../django_vue_mpa/static/vue/',

    chainWebpack: config => {

        config.optimization
            .splitChunks({
                cacheGroups: {
                    moment: {
                        test: /[\\/]node_modules[\\/]moment/,
                        name: "chunk-moment",
                        chunks: "all",
                        priority: 5
                    },
                    vendor: {
                        test: /[\\/]node_modules[\\/]/,
                        name: "chunk-vendors",
                        chunks: "all",
                        priority: 1
                    },
                },
            });

        Object.keys(pages).forEach(page => {
            config.plugins.delete(`html-${page}`);
            config.plugins.delete(`preload-${page}`);
            config.plugins.delete(`prefetch-${page}`);
        })

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

        // Uncomment below to analyze bundle sizes
        // config.plugin("BundleAnalyzerPlugin").use(BundleAnalyzerPlugin);
        
        config.resolve.alias
            .set('__STATIC__', 'static')

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

    }
};

---

这是一个常见的问题-当您使用

runserver

或使用

debug=True

时，django服务器提供静态文件，但部署到prod后，Nginx负责提供静态文件，因此您必须正确配置它。这里有一个很好的部署说明，希望如此helps@quqa123谢谢你的回答！我将Nginx设置为提供静态文件，请参见我的编辑这是一个常见的问题-当您使用

runserver

或使用

debug=True

时，django服务器提供静态文件，但部署到prod后，

Nginx

负责提供静态文件，因此您必须正确配置它。这里有一个很好的部署说明，希望如此helps@quqa123谢谢你的回答！我将Nginx设置为服务于静态文件，请参见我的编辑