When I open my vue app's URL in browser it loads the application. But, when I tried to call the URL with curl in terminal it returns the error
CURL https://vue-app-url.com/
OUTPUT:
<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.0">
<!--[if IE]><link rel="icon" href="/favicon.ico"><![endif]-->
<title>VUE APP</title>
<link href="/app.js" rel="preload" as="script"><link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png"><link rel="manifest" href="/manifest.json"><meta name="theme-color" content="#4DBA87"><meta name="apple-mobile-web-app-capable" content="no"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="apple-mobile-web-app-title" content="app-vue"><link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png"><link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#4DBA87"><meta name="msapplication-TileImage" content="/img/icons/msapplication-icon-144x144.png"><meta name="msapplication-TileColor" content="#000000"></head>
<body>
<noscript>
<strong>We're sorry but app-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/app.js"></script></body>
</html>
As curl will only load the markup this seems to be the correct output. If you add a noscript to a page where the "real" content is loaded or added via Javascript then you will get the noscript via curl. As curl is not loading additional resources.
Try also this commands probably you will get a bit better output:
curl --location https://vue-app-url.com/
or
curl --user-agent "Mozilla/5.0 (X11; Linux x86_64; rv:60.0) Gecko/20100101 Firefox/81.0" https://vue-app-url.com/
Also try removing your noscript just to test it via curl.
Update (better example):
If you add a vue component to you html, lets say:
<feedback-form>Some feedback</feedback-form>
curl will render:
<div id="app"><feedback-form>Some feedback</feedback-form></div>
So everything is ok with your app just the JS is not getting parsed. Its like the source code of you page not the code in your devtools (which is parsed).
Related
I have a Vuejs app that I'm trying to serve via a Golang backend that will also serve the app's API.
When I build and run the Vuejs via "npm run build" and "serve -s dist" and go to the static server's location, everything loads up fine. But when I try to load it through the Golang backend, even though the index.html loads (as verified by checking the source in the browser), I just get a blank white page.
Is this approach not possible? Am I going about this all wrong?
Here is how I am serving the "dist" folder via Golang.
http.Handle("/", http.StripPrefix("/", http.FileServer(http.Dir(htmlFolder+"/dist/"))))
My index.html file:
<!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>TestApp</title>
<link href=/css/app.52c62e82.css rel=preload as=style>
<link href=/css/chunk-vendors.7724753e.css rel=preload as=style>
<link href=/js/app.9a3ab992.js rel=preload as=script>
<link href=/js/chunk-vendors.6808fe3a.js rel=preload as=script>
<link href=/css/chunk-vendors.7724753e.css rel=stylesheet>
<link href=/css/app.52c62e82.css rel=stylesheet>
</head>
<body>
<noscript>
<strong>We're sorry but TestApp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id=app></div>
<script src=/js/chunk-vendors.6808fe3a.js></script>
<script src=/js/app.9a3ab992.js></script>
</body>
</html>
Edit:
I also tried using gorilla/mux example here:
https://blog.questionable.services/article/vue-react-ember-server-golang/
And here is my "dist"'s folder structure.
press F12 on your browser and go to console tab to view the error
Turns out I just needed to empty my caches. I was using FN5 when refreshing assuming that that would reload it.
I currently don't have a favicon for my Vue app and want to remove the default one. I commented out the relevant line in the public/index.html file
<!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.0" />
<!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico" /> -->
<title>My Vue app</title>
</head>
<!-- ... body code ... -->
</html>
and run npm run serve. The page still renders the initial favicon. How can I remove it?
Generally when this happens it's one of two things
Most browsers will check for a file called favicon.ico in the root folder and use it even if you don't include it in your head tag.
If the file has been deleted but you had previously opened the website then it's likely just cached in your browser. You can easily check by opening the site in incognito/private browsing mode. Clearing your browser cache for the website will remove it.
Actually, after trying to change my favicon and failed, I added this line after inspecting vuejs <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon.png">, whereby, this time, favicon.png was targeting my own image.
<!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.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Vue Router Practice</title>
</head>
<body>
<noscript>
<strong>We're sorry but vue-todo doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
This is the code of my index.html file in the public folder.
There is also an icon file named favicon.ico.
But when I run my dev server, the favicon is not showed.
Please help me.
I have tried to change
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
to
<link rel="icon" href="/favicon.ico">
but it's not working either.
and when i type localhost:8080/favicon.ico, it is showing my favicon.
Also, there are correct HTML tags when I debug on chrome dev tool.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Vue Router Practice</title>
</head>
Expected result: favicon should be shown.
I have a same problem.. but I success to fix this, when I switch the double quote to simple quote in the attribute rel, but I don't know why..
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
replace with:
<link rel='icon' href="<%= BASE_URL %>favicon.ico">
If you're using PWA, check your public/img/icons folder too. And make sure that your favicon-16x16.png and favicon-32x32.png files are not the default ones.
And also best way to force cache is to hit the favicon address directly
http://yourwebsite.com/favicon.ico
and press control+f5 for windows/linux or shift+command+R for Mac. You will see it changes. Then navigate back to your webpage and it will be refreshed.
I had this issue and it seemed that Chrome was caching the favicon (was working on multiple projects at once).
So a clear of the cache and closing the browser tab and restart is what worked for me
In my case, I had also created the project as a PWA, hence I also needed to change all the relevant icons
I also had this issue on a PWA project but clearing my cache fixed it.
I want to build vue-cli 3 to my computer. I've created my first folder with vue-cli control panel than I faced with a blank page. In my index.html, I've discovered <strong>We're sorry but vue-test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> error. How to fix that and create a working properly folder instead?
<!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.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>vue-test</title>
</head>
<body>
<noscript>
<strong>We're sorry but vue-test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
I am using Safari Version 12.0.2 (13606.3.4.1.4) and I have very simple page like this,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="https://d161vkckch5xxj.cloudfront.net/LS/ASSETS/PROD/US/bundle.js"></script>
</head>
<body>
Hello There
</body>
</html>
This shows when I reload the page the asset is loading from the cache which is expected.
Changing the Script tag to a URL which redirects to this asset because there are different variations of this script and based on the context right script will be loaded. So when I change script tag from
<script src="https://d161vkckch5xxj.cloudfront.net/LS/ASSETS/PROD/US/bundle.js"></script>
To this
<script src="https://pvpsx9qpxa.execute-api.us-west-1.amazonaws.com/PROD/getAsset?marketplace=US&assetName=bundle.js"></script>
Which points to the same asset, now when I reload the page every time, the whole asset is getting loaded and it's not hitting the cache at all, Mobile Safari has the exact same issue.
In chrome and FF it works the right way and shows the redirect as well, what to do for Safari as it's a big asset and can't be freshly loaded every time.
Chrome results,