190430 ( Problem solving ) How I solved { vue } deployment ,, index.html ,, src path ,, sub-domain path missing

  • Short: -

  1. Timeline from the problem start, and to the problem finally get solved:
    1. 2019-04-29 I tried to deploy project { Doggo } to github.
    2. I follow the Vue deployment guide: Link. I config my vue.config.js, add an option - publicPath property. I create a shell script deploy.sh.
    3. The shell script { deploy.sh } abort when pushing to git: The build part is running fine (npm run build), so I guess the problem is not happens at vue build, but push to github.
    4. Found key info about git can push with { ssh } or { https }: I notice a article imply about git can push with either { https } (suggested?) and { ssh } (not suggested?), so I go back to my deploy.sh and found the address I used was git push -f git@github.com:treegb/doggo.git master:gh-pages, so I think Vue [ document ]-[ guide ] is using ssh method. And maybe I can't push is because I didn't haven't establish some authentication between me (client) and git server before I can use { ssh }. So I think I have to change this line to https address, but I don't know how.
    5. I tried to think about .git directory: This file always appears in every git local project directory, but since the dist directory generate by vue-cli-service build when build, will not have the .git directory in default, so how can I create that .git directory? If I can make that directory inside my dist directly, then I simply just cd to dist, then use git push origin master:gh-pages and it will works.
    6. I notice the { git init } in { deploy.sh } file: So I try to test what this command works. I found this command will generate .git directory, this is just I want.
    7. I still don't know how to push to a specific remote git address: I tried to git push origin master:gh-pages anyway, it failed, with error message - Fatal: 'origin' does not appear to be a git repository. I google with this message and found this article, and I got a key - use git remote add origin url/to/your/fork to "define" what is "origin" in your .git/config first. Now with this command I define what is the "origin" mean in this git local repo.
    8. Push with { git push origin master:gh-pages } now works.
    9. I go to gh-pages static website of this project, but it is blank: A blank page can mean so much things (caused by any kind of possibility)! I don't know if it is my App logic is wrong? The config of my App is wrong? The config of my { build } is wrong? The process of my { vue } { build } is wrong? { Vue } [ guide ]-[ document ] is outdated? My { vue-cli ] global command is outdated? I push to wrong places? The push failed with some reason? My gh-pages setting is wrong and the static site wont not served by default? Git don't support specific kind of content? Other reason I haven't thought about? There is just too much possibility that makes the trouble shooting very very hard!
    10. I have no clue, but I try to do random probe: This is another key, I go into diffuse mode instead of focus mode, I play around with any possibility.
    11. I open the inspector (web console, F12 in Firefox): I found in the console log, it shows 2 abnormal message - ... resources "https://treegb.github.io/js/chunk-vendors.b67a9d55.js" not found ... . But I don't know what it means.
    12. I found a thread, and it hint me to check about the 404 status code: I made a glimpse on this thread, but didn't even see the content at all, instead, I was hint by the keyword 404, and I was thinking about I can check the status code of the request. I open [ web console ]-[ inspect elements ]-[ F12 ] again, go to network tab, and refresh the page. It did show some 404 request of resources. Now I start to guess the problem might be the url in my app is incorrect.
    13. I found index.html have wrong url attribute: After long struggling, I think I can go check the index.html to see if the src attribute is using abnormal domain name. And I found, every src attribute inside don't include sub-domain name doggo. I think this is further closing the source of problem. But I still don't know why.
    14. Now I exclude deployment as the problem: Github and deployment was eliminated outside of the problem, the problem narrow down to the build process itself, it have the wrong url (missing sub-domain name) at the first place.
    15. I was stuck now: I have checked vue.config.js, I set the publicPath correctly. Even I tried a lot of things, it still don't work no matter how. This is the most time I spent for this problem shooting process, I just don't know where the problem is.
    16. The problem is even narrowing down: By following this guide, I tried to create a new vue testing project, and try to build it immediately. Now the same symptom shows up, the index.html in dist directory have the wrong url (missing sub-domain name). I still don't know the problem, but at least I reduce the problem area. I eliminate the possibility of my apps causing the problem.
    17. Another key comes out when I was in "diffuse mode": Nothing I can do, I tried to read guide of vue.config.js, again, casually. At one point, I notice there is another method I can config my Vue behavior, it is through adding extra property - vue, in package.json.
    18. Another key comes out when I was in "diffuse mode": I found there is one [ option ]-[ property ] I can exploit, that is outputDir. At default, when you run npm run build, vue-cli will build it into dist directory, but we can change this behaviour by giving different outputDir value.
    19. I tried to test if ALL configuration at vue work at all: Now I want to make sure one thing first, does any configuration of vue works at all? tried to exploit the outputDir option. I add outputDir: 'disttt' first, and build again. I found with this [ options ]-[ property ], when it is put inside vue.config.js it don't work, but if it is put inside package.json, it works!
    20. Now the problem reduce down to, { vue.config.js } is not working: It might as well caused by many possible reason, but luckily, after looking inside this file again, I found at the module.expots = {} part, I was missing a r character, it should be module.exports = {} instead! Oh my god! This "bug" is so stupid.
  2. What I'd learned in this trouble shooting:
    1. "Diffuse mode" is so important: Using Diffuse mode in the beginning is so much important than focus mode. Diffuse mode first, then focus mode later.
    2. Only obey the Rationality: Not what you want to trust, but what Rationality tells you.
    3. Only obey the Truth: Not what you want to trust, but what Rationality tells you.
    4. "Correlation does not imply causation": Keep making assumption about the where is the real source of the current problem.

Cmm: u190430m120918 x88lost x88fs c88sofw programming c88programming webdev c88webdev problem c88problem problem88problemSolving problem88solved trouble shooting troubleShooting sofw88framework vue vueww vueJs framework88vueJs deploy deployment Current: ti88crr88y19 ti88crr88y19dw2 ti88crr88y19m04 ti88crr88y19m04d30 ti88crr88y19m04dw2 ti88crr88y19q2 ti88crr88y19q2dw2 ti88crr88y19w18 ti88crr88y19w18dw2 Time (d): ti88y19 ti88y19dw2 ti88y19m04 ti88y19m04d30 ti88y19m04dw2 ti88y19q2 ti88y19q2dw2 ti88y19w18 ti88y19w18dw2