Discussion on: Vue on Django, Part 4

[Ryan Palo]

I'm glad that you're headed in the right direction. Let me know if you have any other questions! :)

[electrocnic]

FUCK

Sorry, but I just wrote 30minutes of well-formatted documentation for my 3 bugfixes, which was deleted as I accidentely clicked "reload" on this page :(

Now I want at least share a short docu for my main 3 bugs, which I was able to solve, for anybody who comes after me and might have the same struggles:

1st: I installed the newest vue-cli:

npm uninstall vue-cli -g
npm install -g @vue/cli

Source: cli.vuejs.org/guide/installation.html

2nd: I fixed the format_index_html.py like described in the comment above, but here is the full file again:

import sys
import fileinput

file = 'templates/index.html'

with open(file, "r+") as f:
    s = f.read()
    f.seek(0)
    f.write("{% load staticfiles %}\n" + s)

for i, line in enumerate(fileinput.input(file, inplace=1)):
    sys.stdout.write(line.replace('href=/static/', "href=\"{% static '"))
for i, line in enumerate(fileinput.input(file, inplace=1)):
    sys.stdout.write(line.replace('.css', ".css' %}\""))
for i, line in enumerate(fileinput.input(file, inplace=1)):
    sys.stdout.write(line.replace('src=/static/', "src=\"{% static '"))
for i, line in enumerate(fileinput.input(file, inplace=1)):
    sys.stdout.write(line.replace('.js', ".js' %}\""))

Will fix the broken index.html template and thus will also fix half of the issues with static files, to be correctly served at runtime.

3rd: Fixed the CopyWebpackPlugin error ERROR in [copy-webpack-plugin] unable to locate '[...]/static' at '[...]/static':
Therefore, a workaround in the build/build.js was necessary. All it does is adding a .gitkeep to the STATIC_ROOT directory before the build.

...

//add these lines to the other imports:
const webpackConfig = require('./webpack.prod.conf')
const mkdirp = require('mkdirp')
const fs = require("fs")

...

// add the mkdirp function in the rm-callback:
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err
  mkdirp(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
    if (err) throw err
    // path exists unless there was an error
    fs.closeSync(fs.openSync(path.join(config.build.assetsRoot, config.build.assetsSubDirectory, '.gitkeep'), 'w'));
  });

  webpack(webpackConfig, function (err, stats) {
    spinner.stop()

    ...

Source: github.com/dvallin/agora/issues/1

4th: I had the following bug at runtime, when I tried to add TODO-Entries:
TypeError: Cannot read property 'push' of undefined

and fixed it by modifying the response.body to response.data in the store/index.js (I renamed that file from store.js to index.js):

...

'GET_TODOS': function (state, response) {
  state.todos = response.data
},
'ADD_TODO': function (state, response) {
  state.todos.push(response.data)
},

...

Hopefully this helps other people who might have the same struggles.

Thanks again for the nice tutorial, maybe I will see other tutorials by you, Sir! :)

[Ryan Palo]

Nicely done! I’m sure a lot of people will appreciate this.