1904221
The Vue JS crash course by Traversy did not include the build process for the completed application, so I tried this out after the video ended. I first used the Vue Package Manager GUI (shown above) for the build.
It initially completed with 41 non-severe errors, and in counting them I saw that the errors were of three types:
- 'r' is defined but never used (no-unused-vars): 1
- Mixed spaces and tabs (no-mixed-spaces-and-tabs): 37
- Unexpected console statement (no-console): 3
The first error was simple to resolve, by just removing the variable being complained about. The next one could be resolved by setting the editor to convert tabs to spaces when saving. The last error was referring to console.log() statements and I didn’t bother with that one.
Without using the GUI, in the application directory or folder I typed npm run build in a command window. Next came on the screen...
> vuetodo@1.0.0 build C:\...\vuetodo
> vue-cli-service build
- Building for production...
The dist directory was created containing the build results, though I couldn’t find where it was defined. There were two files index.html and favicon.ico, and 2 directories css and js. The css directory contained one file named app.322f112f.css, while the js directory contained about.63e168e4.js, app.c1fcaa18.js and chunk-vendors.651e95e7.js with their corresponding .map files. (Later I noticed rebuilding again could alter some of the CSS and JS file names and even the variables within the JavaScript files.)
I examined the files generated. I tried double-clicking dist\index.html to open it in the browser and only a blank screen came up with the application title. Did it require a web server to work? I started Apache server and tried browsing http://localhost/brad/vuetodo/dist/ with the same result.
I studied the files some more. The dist\index.html contained one long line of text:
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon.ico><title>VueJS Todo List</title><link href=/js/about.63e168e4.js rel=prefetch><link href=/css/app.322f112f.css rel=preload as=style><link href=/js/app.c1fcaa18.js rel=preload as=script><link href=/js/chunk-vendors.651e95e7.js rel=preload as=script><link href=/css/app.322f112f.css rel=stylesheet></head><body><noscript><strong>We're sorry but vuetodo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.651e95e7.js></script><script src=/js/app.c1fcaa18.js></script></body></html>
Notice how line breaks, some spacing and quote marks have been removed from the code. I checked dist\index.html and saw that the href and src attributes were referencing the root directory (/) so I replaced href=/ with href=./ and src=/ with src=./, saved as index1.html and this now showed the app. Clicking the Home and About menu options didn’t work so more changes were needed. I figured the dist\js\app.c1fcaa18.js being referenced last in the <body> tag of the index.html file should be the one implementing the menu. Like the index.html, it also contained a very long single line of (JavaScript) code. After searching for "/" within it, I changed c.p="/" to c.p="./" and this solved the problem. The browser could then show the application fully from its location, with the two links working.