Question

我正在尝试部署一个非常简单的Django应用程序，该应用程序使用Django-Webpack-Loader将VueJS与Webpack-Loader结合使用。我可以使用manage.py runserver和npm run serve在本地运行我的应用程序，而不会出现任何问题。

现在，我正在尝试使用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_vue_mpa>静态

有人可以帮我吗？

我确保使用npm run build构建用于生产的前端，并且我使用manage.py collectstatic收集了静态文件，但仍然收到错误。任何建议都是值得的。

我的Nginx conf：

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;
    }
}

我的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": ["*"]})

    }
};

Django / Nginx-找不到静态文件

0 个答案: