首先

这是在使用 django-webpack-loader + vue-cli 进行配置时，从启动到在 Heroku 上发布的备忘录。

django-webpack-loader 在 Django 的配置方面基本上按照 README.md#configuration 的说明进行，但在 webpack 的配置方面只有 webpack.config.js 的设置。

在本篇文章中，我将介绍有关如何在vue-cli中设置vue.config.js的配置以使其运作的内容。

版本

$ python --version
Python 3.7.11
$ vue --version
@vue/cli 4.5.13

Django = "^3.2.4"
django-webpack-loader = "^1.1.0"

"vue": "^3.0.0"
"webpack-bundle-tracker": "^1.1.0"

最低限度的设定

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

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
            ? '/static/dist/'
            : 'http://localhost:8080/',
  outputDir: 'static/dist',
  configureWebpack: {
    plugins: [
      new BundleTracker({filename: './webpack-stats.json'}),
    ],
  },
  css: {
    sourceMap: true,
  },
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
}

项目说明

公共路径

publicPath: process.env.NODE_ENV === 'production' 
          ? '/static/dist/'
          : 'http://localhost:8080/'

除了本番环境之外，其余环境都是 http://localhost:8080/。
localhost:8080 是 devServer 的默认地址。

为什么不能使用 ‘/’？

如果在publicPath中省略HOST:PORT，那么Django静态文件的URL将如下所示：
http://localhost:8000/
localhost:8000是runserver的默认值。

换句话说，Django 会尝试寻找文件。
在开发过程中，并不会通过构建来生成静态文件，所以需要向 Vue 的 devServer 请求文件。因此，配置值为 http://localhost:8080/。

输出目录

outputDir: 'static/dist'

将django的settings.STATICFILES_DIRS指定为指定目录的值。

由于在本次设置中指定了 settings.STATICFILES_DIRS=[‘static’]，因此会将 yarn build 的输出指定为 static/ 下的 dist 目录。

配置Webpack

configureWebpack: {
    plugins: [
      new BundleTracker({filename: './webpack-stats.json'}),
    ],
  }

使用django-webpack-loader与webpack-bundle-tracker一起，下面是相应的配置。

在django的设置中，通过settings.WEBPACK_LOADER[“default”][“STATS_FILE”]来指定要引用的文件输出到哪里。

CSS源映射

css: {
  sourceMap: true,
}

django-webpack-loader在寻找filename.css.map文件，但由于vue-cli的默认设置为禁用，因此会导致错误。

开发服务器的头部

devServer: {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
}

为了启用热重载，需要这样做。当Vue端的源代码发生更改时，会尝试从localhost:8000（django）访问localhost:8080（Vue）的hot-update.json文件，但是在这个过程中会遇到CORS问题。为了解决这个问题，我们在devServer中指定了’Access-Control-Allow-Origin’: ‘*’。

最后

这次我会把试验用的源代码贴出来。
只是在尝试使用 django-webpack-loader + vue-cli，所以只生成了一个 django/vue 项目。

Github
https://github.com/tsukachu/django_vue

Github
https://github.com/tsukachu/django_vue