django-webpack 在生产环境中指向 localhost答案

【问题标题】：django-webpack points to localhost in productiondjango-webpack 在生产环境中指向 localhost
【发布时间】：2021-09-12 00:39:44
【问题描述】：

我使用 vue 和 django webpack loader 在 django 模板中渲染一个 vue 应用程序。

它在本地运行良好，但是当我部署它时，一切都出错了

在模板中我有这个：

    {% load render_bundle from webpack_loader %}
    {% render_bundle "chunk-vendors" %}
    {% render_bundle "app" %}

在生产中是这样渲染的：

   <script type="text/javascript" src="http://localhost:8080/js/chunk-vendors.js" ></script>
    <script type="text/javascript" src="http://localhost:8080/js/app.js" ></script>

vue.config.js 看起来像这样：

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

const DEPLOYMENT_PATH = '/static/dist'

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? DEPLOYMENT_PATH : 
    'http://localhost:8080/',
    outputDir: '../_static/dist',

    configureWebpack: {
        
        plugins: [
            new BundleTracker({path: __dirname, filename: 'webpack-stats.json'}),
        
        ],
    },
    "transpileDependencies": [
        "vuetify"
    ],
    chainWebpack: config => {
       
          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": ["*"] });
        config.module.rules.delete('eslint');
    },
}

``

【问题讨论】：

标签： django vue.js webpack

【解决方案1】：

我也有类似的情况....使用 process.env.XXX 解决了我的....

DEPLOYMENT_PATH=MY_COOL_PATH npm run build --prefix frontend/

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

const DEPLOYMENT_PATH = '/static/dist'

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? process.env.DEPLOYMENT_PATH : 
    'http://localhost:8080/',
    outputDir: '../_static/dist',

    configureWebpack: {
        
        plugins: [
            new BundleTracker({path: __dirname, filename: 'webpack-stats.json'}),
        
        ],
    },
    "transpileDependencies": [
        "vuetify"
    ],
    chainWebpack: config => {
       
          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": ["*"] });
        config.module.rules.delete('eslint');
    },
}

``

【讨论】：