[{"data":1,"prerenderedAt":871},["ShallowReactive",2],{"article-path-to-resources-javascript-images-etc-not-found-with-vuejs-build":3},{"article":4,"tags":565,"previous":580,"next":689},{"id":5,"title":6,"author":7,"body":8,"createdAt":554,"description":555,"extension":556,"img":33,"meta":557,"navigation":558,"path":559,"seo":560,"stem":561,"tags":562,"updatedAt":554,"__hash__":564},"articles\u002Farticles\u002Fpath-to-resources-javascript-images-etc-not-found-with-vuejs-build.md","Path to Resources (JavaScript, Images etc.) Not Found with Vue.js Build",null,{"type":9,"value":10,"toc":552},"minimark",[11,19,22,36,39,494,504,514,525,531,545,548],[12,13,14,15,18],"p",{},"Using @vue\u002Fcli 4.3.1",[16,17],"br",{},"\nWith minimal changes to code\u002Fsolution I found that resources (path to files) was not found after performing npm run build.  I was hoping to just run the newly built web application in the client side browser from File Explorer.  I ran the page and saw an empty screen.  So what was the issue and resolution?",[12,20,21],{},"The issue (visible within the screen capture – white screen and ERR_FILE_NOT_FOUND error message from the Chrome Debugger – Network Tools)",[12,23,24],{},[25,26,28],"a",{"href":27},"\u002Farticles\u002Fimages\u002Fimage_637255046941289166.png",[29,30],"img",{"style":31,"title":32,"src":33,"alt":32,"width":34,"height":35},"display: inline;","image","\u002Farticles\u002Fimages\u002Fimage_thumb_637255046943290619.png",1124,286,[12,37,38],{},"Doing a view source the problem started to surface.  You can see below the path was relative to the root directory.  While running from File Explorer this must be relative path.",[40,41,46],"pre",{"className":42,"code":43,"language":44,"meta":45,"style":45},"language-html shiki shiki-themes github-light github-dark","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n    \u003Chead>\n        \u003Cmeta charset=\"utf-8\">\n        \u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n        \u003Cmeta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">\n        \u003Clink rel=\"icon\" href=\"\u002Ffavicon.ico\">\u003Ctitle>Cargo\u003C\u002Ftitle>\n        \u003Clink href=\"\u002Fjs\u002Fcargo.js\" rel=\"preload\" as=\"script\">\n        \u003Clink href=\"\u002Fjs\u002Fchunk-common\u003C\u002Fstrong>.js\" rel=\"preload\" as=\"script\">\n        \u003Clink href=\"\u002Fjs\u002Fchunk-vendors.js\" rel=\"preload\" as=\"script\">\n    \u003C\u002Fhead>\n    \u003Cbody>\n        \u003Cnoscript>\n        \u003Cstrong>We're sorry but Cargo doesn't work properly \n        without JavaScript enabled. \n        Please enable it to continue.\u003C\u002Fstrong>\n        \u003C\u002Fnoscript>\n        \u003Cdiv id=\"app\">\u003C\u002Fdiv>\n        \u003C!-- built files will be auto injected -->\n        \u003Cscript type=\"text\u002Fjavascript\" src=\"\u002Fjs\u002Fchunk-vendors.js\">\u003C\u002Fscript>\n        \u003Cscript type=\"text\u002Fjavascript\" src=\"\u002Fjs\u002Fchunk-common.js\">\u003C\u002Fscript>\n        \u003Cscript type=\"text\u002Fjavascript\" src=\"\u002Fjs\u002Fcargo.js\">\u003C\u002Fscript>\n    \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html","",[47,48,49,69,89,100,119,144,168,205,236,270,298,308,318,328,339,345,355,365,388,395,424,450,475,484],"code",{"__ignoreMap":45},[50,51,54,58,62,66],"span",{"class":52,"line":53},"line",1,[50,55,57],{"class":56},"sVt8B","\u003C!",[50,59,61],{"class":60},"s9eBZ","DOCTYPE",[50,63,65],{"class":64},"sScJk"," html",[50,67,68],{"class":56},">\n",[50,70,72,75,77,80,83,87],{"class":52,"line":71},2,[50,73,74],{"class":56},"\u003C",[50,76,44],{"class":60},[50,78,79],{"class":64}," lang",[50,81,82],{"class":56},"=",[50,84,86],{"class":85},"sZZnC","\"en\"",[50,88,68],{"class":56},[50,90,92,95,98],{"class":52,"line":91},3,[50,93,94],{"class":56},"    \u003C",[50,96,97],{"class":60},"head",[50,99,68],{"class":56},[50,101,103,106,109,112,114,117],{"class":52,"line":102},4,[50,104,105],{"class":56},"        \u003C",[50,107,108],{"class":60},"meta",[50,110,111],{"class":64}," charset",[50,113,82],{"class":56},[50,115,116],{"class":85},"\"utf-8\"",[50,118,68],{"class":56},[50,120,122,124,126,129,131,134,137,139,142],{"class":52,"line":121},5,[50,123,105],{"class":56},[50,125,108],{"class":60},[50,127,128],{"class":64}," http-equiv",[50,130,82],{"class":56},[50,132,133],{"class":85},"\"X-UA-Compatible\"",[50,135,136],{"class":64}," content",[50,138,82],{"class":56},[50,140,141],{"class":85},"\"IE=edge\"",[50,143,68],{"class":56},[50,145,147,149,151,154,156,159,161,163,166],{"class":52,"line":146},6,[50,148,105],{"class":56},[50,150,108],{"class":60},[50,152,153],{"class":64}," name",[50,155,82],{"class":56},[50,157,158],{"class":85},"\"viewport\"",[50,160,136],{"class":64},[50,162,82],{"class":56},[50,164,165],{"class":85},"\"width=device-width,initial-scale=1.0\"",[50,167,68],{"class":56},[50,169,171,173,176,179,181,184,187,189,192,195,198,201,203],{"class":52,"line":170},7,[50,172,105],{"class":56},[50,174,175],{"class":60},"link",[50,177,178],{"class":64}," rel",[50,180,82],{"class":56},[50,182,183],{"class":85},"\"icon\"",[50,185,186],{"class":64}," href",[50,188,82],{"class":56},[50,190,191],{"class":85},"\"\u002Ffavicon.ico\"",[50,193,194],{"class":56},">\u003C",[50,196,197],{"class":60},"title",[50,199,200],{"class":56},">Cargo\u003C\u002F",[50,202,197],{"class":60},[50,204,68],{"class":56},[50,206,208,210,212,214,216,219,221,223,226,229,231,234],{"class":52,"line":207},8,[50,209,105],{"class":56},[50,211,175],{"class":60},[50,213,186],{"class":64},[50,215,82],{"class":56},[50,217,218],{"class":85},"\"\u002Fjs\u002Fcargo.js\"",[50,220,178],{"class":64},[50,222,82],{"class":56},[50,224,225],{"class":85},"\"preload\"",[50,227,228],{"class":64}," as",[50,230,82],{"class":56},[50,232,233],{"class":85},"\"script\"",[50,235,68],{"class":56},[50,237,239,241,243,245,247,250,253,256,258,260,262,264,266,268],{"class":52,"line":238},9,[50,240,105],{"class":56},[50,242,175],{"class":60},[50,244,186],{"class":64},[50,246,82],{"class":56},[50,248,249],{"class":85},"\"\u002Fjs\u002Fchunk-common",[50,251,74],{"class":252},"s7hpK",[50,254,255],{"class":85},"\u002Fstrong>.js\"",[50,257,178],{"class":64},[50,259,82],{"class":56},[50,261,225],{"class":85},[50,263,228],{"class":64},[50,265,82],{"class":56},[50,267,233],{"class":85},[50,269,68],{"class":56},[50,271,273,275,277,279,281,284,286,288,290,292,294,296],{"class":52,"line":272},10,[50,274,105],{"class":56},[50,276,175],{"class":60},[50,278,186],{"class":64},[50,280,82],{"class":56},[50,282,283],{"class":85},"\"\u002Fjs\u002Fchunk-vendors.js\"",[50,285,178],{"class":64},[50,287,82],{"class":56},[50,289,225],{"class":85},[50,291,228],{"class":64},[50,293,82],{"class":56},[50,295,233],{"class":85},[50,297,68],{"class":56},[50,299,301,304,306],{"class":52,"line":300},11,[50,302,303],{"class":56},"    \u003C\u002F",[50,305,97],{"class":60},[50,307,68],{"class":56},[50,309,311,313,316],{"class":52,"line":310},12,[50,312,94],{"class":56},[50,314,315],{"class":60},"body",[50,317,68],{"class":56},[50,319,321,323,326],{"class":52,"line":320},13,[50,322,105],{"class":56},[50,324,325],{"class":60},"noscript",[50,327,68],{"class":56},[50,329,331,333,336],{"class":52,"line":330},14,[50,332,105],{"class":56},[50,334,335],{"class":60},"strong",[50,337,338],{"class":56},">We're sorry but Cargo doesn't work properly \n",[50,340,342],{"class":52,"line":341},15,[50,343,344],{"class":56},"        without JavaScript enabled. \n",[50,346,348,351,353],{"class":52,"line":347},16,[50,349,350],{"class":56},"        Please enable it to continue.\u003C\u002F",[50,352,335],{"class":60},[50,354,68],{"class":56},[50,356,358,361,363],{"class":52,"line":357},17,[50,359,360],{"class":56},"        \u003C\u002F",[50,362,325],{"class":60},[50,364,68],{"class":56},[50,366,368,370,373,376,378,381,384,386],{"class":52,"line":367},18,[50,369,105],{"class":56},[50,371,372],{"class":60},"div",[50,374,375],{"class":64}," id",[50,377,82],{"class":56},[50,379,380],{"class":85},"\"app\"",[50,382,383],{"class":56},">\u003C\u002F",[50,385,372],{"class":60},[50,387,68],{"class":56},[50,389,391],{"class":52,"line":390},19,[50,392,394],{"class":393},"sJ8bj","        \u003C!-- built files will be auto injected -->\n",[50,396,398,400,403,406,408,411,414,416,418,420,422],{"class":52,"line":397},20,[50,399,105],{"class":56},[50,401,402],{"class":60},"script",[50,404,405],{"class":64}," type",[50,407,82],{"class":56},[50,409,410],{"class":85},"\"text\u002Fjavascript\"",[50,412,413],{"class":64}," src",[50,415,82],{"class":56},[50,417,283],{"class":85},[50,419,383],{"class":56},[50,421,402],{"class":60},[50,423,68],{"class":56},[50,425,427,429,431,433,435,437,439,441,444,446,448],{"class":52,"line":426},21,[50,428,105],{"class":56},[50,430,402],{"class":60},[50,432,405],{"class":64},[50,434,82],{"class":56},[50,436,410],{"class":85},[50,438,413],{"class":64},[50,440,82],{"class":56},[50,442,443],{"class":85},"\"\u002Fjs\u002Fchunk-common.js\"",[50,445,383],{"class":56},[50,447,402],{"class":60},[50,449,68],{"class":56},[50,451,453,455,457,459,461,463,465,467,469,471,473],{"class":52,"line":452},22,[50,454,105],{"class":56},[50,456,402],{"class":60},[50,458,405],{"class":64},[50,460,82],{"class":56},[50,462,410],{"class":85},[50,464,413],{"class":64},[50,466,82],{"class":56},[50,468,218],{"class":85},[50,470,383],{"class":56},[50,472,402],{"class":60},[50,474,68],{"class":56},[50,476,478,480,482],{"class":52,"line":477},23,[50,479,303],{"class":56},[50,481,315],{"class":60},[50,483,68],{"class":56},[50,485,487,490,492],{"class":52,"line":486},24,[50,488,489],{"class":56},"\u003C\u002F",[50,491,44],{"class":60},[50,493,68],{"class":56},[12,495,496,497,500,501],{},"The ",[335,498,499],{},"resolution"," while difficult to find, was easy to implement.  Opening up my vue.config.js I simply referenced the publicPath with a vlaue of  ",[335,502,503],{},"publicPath: '.\u002F'",[12,505,506],{},[25,507,509],{"href":508},"\u002Farticles\u002Fimages\u002Fimage_637255046945239780.png",[29,510],{"style":31,"title":32,"src":511,"alt":32,"width":512,"height":513},"\u002Farticles\u002Fimages\u002Fimage_thumb_637255046947319889.png",567,375,[12,515,516,517,524],{},"Finding the ",[25,518,523],{"href":519,"target":520,"rel":521},"https:\u002F\u002Fcli.vuejs.org\u002Fconfig\u002F#vue-config-js","_blank",[522],"noopener","documentation",", the default value is ‘\u002F’ which is what I was finding. ",[12,526,527,528],{},"The base URL your application bundle will be deployed at (known as baseUrl before Vue CLI 3.3). ",[335,529,530],{},"This is the equivalent of webpack's output.publicPath, but Vue CLI also needs this value for other purposes, so you should always use publicPath instead of modifying webpack output.publicPath.",[12,532,533,534,539,540,544],{},"By default, Vue CLI assumes your app will be deployed at the root of a domain, e.g. ",[25,535,536],{"href":536,"rel":537},"https:\u002F\u002Fwww.my-app.com\u002F",[538],"nofollow",". If your app is deployed at a sub-path, you will need to specify that sub-path using this option. For example, if your app is deployed at ",[25,541,542],{"href":542,"rel":543},"https:\u002F\u002Fwww.foobar.com\u002Fmy-app\u002F",[538],", set publicPath to '\u002Fmy-app\u002F'.",[12,546,547],{},"The value can also be set to an empty string ('') or a relative path (.\u002F) so that all assets are linked using relative paths. This allows the built bundle to be deployed under any public path, or used in a file system based environment like a Cordova hybrid app.",[549,550,551],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":45,"searchDepth":71,"depth":71,"links":553},[],"2020-05-19T17:04:54.881Z","Resources not found with vue cli build","md",{},true,"\u002Farticles\u002Fpath-to-resources-javascript-images-etc-not-found-with-vuejs-build",{"title":6,"description":555},"articles\u002Fpath-to-resources-javascript-images-etc-not-found-with-vuejs-build",[563],"vuejs","ccEvdVv8lVqOsfxnu_npwblWarxJcuJEuUnc3xPa8Zk",[566],{"id":567,"title":568,"body":569,"description":573,"extension":556,"img":574,"meta":575,"name":563,"navigation":558,"path":576,"seo":577,"stem":578,"__hash__":579},"tags\u002Ftags\u002Fvuejs.md","Vuejs",{"type":9,"value":570,"toc":571},[],{"title":45,"searchDepth":71,"depth":71,"links":572},[],"Vue (pronounced \u002Fvjuː\u002F, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1598313183973-4effcded8d5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80",{},"\u002Ftags\u002Fvuejs",{"description":573},"tags\u002Fvuejs","FLzo8HD9QLE9FzBr4K8hRvB7QUPBQ4Ku-dpXQK90QZM",{"id":581,"title":582,"author":7,"body":583,"createdAt":680,"description":681,"extension":556,"img":601,"meta":682,"navigation":558,"path":683,"seo":684,"stem":685,"tags":686,"updatedAt":680,"__hash__":688},"articles\u002Farticles\u002Fazure-devops-file-transformation-pipeline.md","Azure DevOps File Transformation Pipeline",{"type":9,"value":584,"toc":678},[585,588,594,604,607,617,620,641,644,665],[12,586,587],{},"Running locally via Visual Studio and JetBrains Rider and managing the ASPNETCORE_ENVIRONMENT variable has been challenging.  Changing and setting ASPNETCORE_ENVIRONMENT within launchSettings.json and\u002For within Project Properties impacts the web.{envrionment}.config files.  Without the appropriate configuration within the publish steps the site was being deployed with incorrect settings and it was time consuming to track it back to the best approach.  So for now I have a pipeline build process setup for each AppService ‘slot’ setting different BuildConfiguration within each to ensure the most appropriate web.config is deployed.",[12,589,590,591,593],{},"This is a .net core asp.net web application so why the web.config? It appears that locally during IIS Express\u002FIIS there is still a dependency on this web.config to identify the hosting model (inprocess) and reference to the exe that would be run.  This is of course when deploying to Windows infrastructure.",[16,592],{},"\nProject Properties – Environment variables",[12,595,596],{},[25,597,599],{"href":598},"\u002Farticles\u002Fimages\u002Fimage_637262774405512580.png",[29,600],{"style":31,"title":32,"src":601,"alt":32,"width":602,"height":603},"\u002Farticles\u002Fimages\u002Fimage_thumb_637262774407471496.png",457,345,[12,605,606],{},"My launchSettings.json – you can see I can modify before running how IIS or IIS Express identifies the environment variable",[12,608,609],{},[25,610,612],{"href":611},"\u002Farticles\u002Fimages\u002Fimage_637262774409386358.png",[29,613],{"style":31,"title":32,"src":614,"alt":32,"width":615,"height":616},"\u002Farticles\u002Fimages\u002Fimage_thumb_637262774411646559.png",463,415,[12,618,619],{},"The resultant\u002Frelated web.configs looks like the following for Development and Staging environments.",[12,621,622,623,631,633,634],{},"web.config\n",[25,624,626],{"href":625},"\u002Farticles\u002Fimages\u002Fimage_637262774414383837.png",[29,627],{"style":31,"title":32,"src":628,"alt":32,"width":629,"height":630},"\u002Farticles\u002Fimages\u002Fimage_thumb_637262774416208149.png",484,113,[16,632],{},"\nweb.Staging.config (you can see the addition of the xdt:Transform=”Replace” attribute which informs publish that when building for Staging to replace this variable within web.config with this value)\n",[25,635,637],{"href":636},"\u002Farticles\u002Fimages\u002Fimage_637262774419133421.png",[29,638],{"style":31,"title":32,"src":639,"alt":32,"width":629,"height":640},"\u002Farticles\u002Fimages\u002Fimage_thumb_637262774421036401.png",117,[12,642,643],{},"By default the build process on Azure DevOps – Pipelines was ignoring any file transformation requirements.  In order to establish File Transformation on publish notice the –configuration $(BuildConfiguration)",[12,645,646,654,656,657],{},[25,647,649],{"href":648},"\u002Farticles\u002Fimages\u002Fimage_637262774423325714.png",[29,650],{"style":31,"title":32,"src":651,"alt":32,"width":652,"height":653},"\u002Farticles\u002Fimages\u002Fimage_thumb_637262774425301819.png",661,295,[16,655],{},"\nand the respective variable that is used during publish to identify the appropriate configuration to use (development\u002Fstaging etc.)\n",[25,658,660],{"href":659},"\u002Farticles\u002Fimages\u002Fimage_637262774427383207.png",[29,661],{"style":31,"title":32,"src":662,"alt":32,"width":663,"height":664},"\u002Farticles\u002Fimages\u002Fimage_thumb_637262774428896829.png",702,164,[12,666,667,668,670],{},"After the build and using App Service Editor my web.config was successfully transformed",[16,669],{},[25,671,673],{"href":672},"\u002Farticles\u002Fimages\u002Fimage_637262774431201007.png",[29,674],{"style":31,"title":32,"src":675,"alt":32,"width":676,"height":677},"\u002Farticles\u002Fimages\u002Fimage_thumb_637262774433117797.png",700,190,{"title":45,"searchDepth":71,"depth":71,"links":679},[],"2020-05-28T15:44:03.462Z","Azure DevOps. Build Pipelines and establishing build configurations when deploying to a Windows environment.  The following is quick documentation walking through the process to ensure appropriate web.config files and transforms are performing during the publish steps within your pipeline.  This is one approach used, while I believe there are still other alternatives available.",{},"\u002Farticles\u002Fazure-devops-file-transformation-pipeline",{"title":582,"description":681},"articles\u002Fazure-devops-file-transformation-pipeline",[687],"azure","lk4UjX3qvCsYs7rdaocW7xYDRc5SC2dkZpoMWRp45C4",{"id":690,"title":691,"author":7,"body":692,"createdAt":862,"description":863,"extension":556,"img":864,"meta":865,"navigation":558,"path":866,"seo":867,"stem":868,"tags":869,"updatedAt":862,"__hash__":870},"articles\u002Farticles\u002Fvue-cli-creating-a-project-issue-with-hot-reload.md","Vue CLI Creating a Project Issue with Hot Reload",{"type":9,"value":693,"toc":860},[694,702,713,773,776,783,834,842,857],[12,695,696,697,701],{},"I noticed today after creating a new vue project via “vue create new-app” that hot reload was not working while modifying html within App.vue.\nHow can this be, it is brand new app on the latest bits.\nFollowing the instructions on ",[25,698,700],{"href":699,"target":520},"https:\u002F\u002Fcli.vuejs.org\u002Fguide\u002Fcreating-a-project.html","cli.vuejs.org","\nit states that vue-clie-service starts webpack-dev-server out of the box ”",[12,703,496,704,707,708,712],{},[47,705,706],{},"vue-cli-service serve"," command starts a dev server\n(based on ",[25,709,711],{"href":710},"https:\u002F\u002Fgithub.com\u002Fwebpack\u002Fwebpack-dev-server","webpack-dev-server",") that\ncomes with Hot-Module-Replacement (HMR) working out of the box.”  Why. Brand new project, with the latest bits and it still\ndid not work.   I found 2 solutions. The first fix was for me, was to add a vue.config.js\nfile to the root directory (alongside the package.json) and add the following devServer property",[40,714,718],{"className":715,"code":716,"language":717,"meta":45,"style":45},"language-js shiki shiki-themes github-light github-dark","devServer: {          \n    useLocalIp: false,   \n        proxy: 'http:\u002F\u002Flocalhost:8080',   \n        public: '172.23.3.180:8080'       \n}\n","js",[47,719,720,728,743,755,768],{"__ignoreMap":45},[50,721,722,725],{"class":52,"line":53},[50,723,724],{"class":64},"devServer",[50,726,727],{"class":56},": {          \n",[50,729,730,733,736,740],{"class":52,"line":71},[50,731,732],{"class":64},"    useLocalIp",[50,734,735],{"class":56},": ",[50,737,739],{"class":738},"sj4cs","false",[50,741,742],{"class":56},",   \n",[50,744,745,748,750,753],{"class":52,"line":91},[50,746,747],{"class":64},"        proxy",[50,749,735],{"class":56},[50,751,752],{"class":85},"'http:\u002F\u002Flocalhost:8080'",[50,754,742],{"class":56},[50,756,757,760,762,765],{"class":52,"line":102},[50,758,759],{"class":64},"        public",[50,761,735],{"class":56},[50,763,764],{"class":85},"'172.23.3.180:8080'",[50,766,767],{"class":56},"       \n",[50,769,770],{"class":52,"line":121},[50,771,772],{"class":56},"}\n",[12,774,775],{},"Note: the public ip address that I used here was from “IPv4 Address” after performing ipconfig in a command prompt. So documenting here will help me find\u002Fresolve this next week when this comes up again. But why, and why was it so difficult to find this resolution?",[12,777,778,779,782],{},"The second solution which ",[335,780,781],{},"I liked better ","(and seems faster) was as-follows. Again, a modification to the vue.config.js and also adding a new ‘script’ to package.json",[40,784,786],{"className":715,"code":785,"language":717,"meta":45,"style":45},"configureWebpack: {\n   devServer: {\n      watchOptions: {\n         poll: true\n      }\n   }\n}\n",[47,787,788,796,803,810,820,825,830],{"__ignoreMap":45},[50,789,790,793],{"class":52,"line":53},[50,791,792],{"class":64},"configureWebpack",[50,794,795],{"class":56},": {\n",[50,797,798,801],{"class":52,"line":71},[50,799,800],{"class":64},"   devServer",[50,802,795],{"class":56},[50,804,805,808],{"class":52,"line":91},[50,806,807],{"class":64},"      watchOptions",[50,809,795],{"class":56},[50,811,812,815,817],{"class":52,"line":102},[50,813,814],{"class":64},"         poll",[50,816,735],{"class":56},[50,818,819],{"class":738},"true\n",[50,821,822],{"class":52,"line":121},[50,823,824],{"class":56},"      }\n",[50,826,827],{"class":52,"line":146},[50,828,829],{"class":56},"   }\n",[50,831,832],{"class":52,"line":170},[50,833,772],{"class":56},[12,835,836,837,841],{},"The script within package.json. Here you can see I am setting environment NODE_ENV to development using the ",[25,838,840],{"href":839,"target":520},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fcross-env#installation","cross-env"," npm package (I had to install via npm installl –save-dev cross-env)",[40,843,845],{"className":715,"code":844,"language":717,"meta":45,"style":45},"\"dev\": \"cross-env NODE_ENV=development vue-cli-service serve --open --host localhost\"\n",[47,846,847],{"__ignoreMap":45},[50,848,849,852,854],{"class":52,"line":53},[50,850,851],{"class":85},"\"dev\"",[50,853,735],{"class":56},[50,855,856],{"class":85},"\"cross-env NODE_ENV=development vue-cli-service serve --open --host localhost\"\n",[549,858,859],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":45,"searchDepth":71,"depth":71,"links":861},[],"2020-05-18T21:44:23.866Z","Hot module reload issues with project created with vue cli","\u002Farticles\u002Fimages\u002Fvuecli.png",{},"\u002Farticles\u002Fvue-cli-creating-a-project-issue-with-hot-reload",{"title":691,"description":863},"articles\u002Fvue-cli-creating-a-project-issue-with-hot-reload",[563],"stNfxxuWXTHpzSMOXcF6aqRaYHGsRiH2IzJU3A56aUM",1781574770000]