- Short: -
- Timeline from the problem start, and to the problem finally get solved:
- 2019-04-29 I tried to deploy project { Doggo } to github.
- I follow the Vue deployment guide: Link. I config my
vue.config.js
, add an option -publicPath
property. I create a shell scriptdeploy.sh
. - 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. - 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 wasgit 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. - I tried to think about .git directory: This file always appears in every git local project directory, but since the
dist
directory generate byvue-cli-service build
whenbuild
, 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 justcd
todist
, then usegit push origin master:gh-pages
and it will works. - 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. - 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 - usegit 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. - Push with { git push origin master:gh-pages } now works.
- 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!
- 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.
- 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. - 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.
- 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 namedoggo
. I think this is further closing the source of problem. But I still don't know why. - Now I exclude deployment as the problem: Github and
deployment
was eliminated outside of the problem, the problem narrow down to thebuild
process itself, it have the wrong url (missing sub-domain name) at the first place. - I was stuck now: I have checked
vue.config.js
, I set thepublicPath
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. - 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, theindex.html
indist
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. - 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
, inpackage.json
. - 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 runnpm run build
, vue-cli willbuild
it intodist
directory, but we can change this behaviour by giving differentoutputDir
value. - 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 addoutputDir: 'disttt'
first, and build again. I found with this [ options ]-[ property ], when it is put insidevue.config.js
it don't work, but if it is put insidepackage.json
, it works! - 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 ar
character, it should bemodule.exports = {}
instead! Oh my god! This "bug" is so stupid.
- What I'd learned in this trouble shooting:
- "Diffuse mode" is so important: Using
Diffuse mode
in the beginning is so much important thanfocus mode
.Diffuse mode
first, thenfocus mode
later. - Only obey the Rationality: Not what you want to trust, but what Rationality tells you.
- Only obey the Truth: Not what you want to trust, but what Rationality tells you.
- "Correlation does not imply causation": Keep making assumption about the where is the real source of the current problem.
- "Diffuse mode" is so important: Using
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