I want to modify the index html during the vue cli build process. (vue.config.js)
Is there any way to do this?
This is my index html looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<%= foo %>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta charset="utf-8" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>blabla</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimal-ui" />
</head>
<body>
<noscript>
<strong>We're sorry but tera.com-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
</body>
</html>
and I want vue/webpack to parse the value 1 to foo.
Vue will attach to the DIV with id app. So your {{foo}} will be out of range for Vue to change it.
You should look into Single File Components, that way you'll be able to wrap your whole HTML inside Vue.
Related
I need to change the structure of my files when I put in production :
default :
-dist
--css
--fonts
--img
--js
--favicon.ico
--index.html
and i want like this :
-dist
--index.html
--app
---css
---fonts
---img
---js
---favicon.ico
I try to change directly the html in index.html
<!doctype html>
<html lang="">
<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="app/favicon.ico">
<title>Roquette</title>
<script defer="defer" src="app/js/chunk-vendors.6e8aa085.js"></script>
<script defer="defer" src="app/js/app.4955a200.js"></script>
<link href="app/css/app.d0b83381.css" rel="stylesheet">
</head>
<body>
<noscript><strong>We're sorry but serveur-roquette doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div>
</body>
</html>
But it doesn't work there must be some paths missing somewhere
I'm coding using Vue JS technology and I'm trying to load the favicon but it won't show up. I tried to look for other documentation about it but can't find one. I'm a beginner in this technology hope someone help. Thanks!
Here is my code in HTML:
<!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="favicon.ico" />
<title>Hello World</title>
</head>
<body>
<noscript>
<strong>
We're sorry but codesandbox doesn't work properly without
JavaScript enabled. Please enable it to continue.
</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
Please check the attached image there is the code as well.
In Vuejs, your favicon.ico should be in either public or assets folder.
To access images from assets folder in vue one would do :src="require('#/assets/images/favicon.ico')"
To access images from public folder in vue one would do :src="./static/images/favicon.ico"
I hope this helps!!
Using current Pelican and the pelican-bootstrap3 theme.
Currently I use save_as to set the article which should be the current landing page.
When I do that Facebook throws an error because the canonical url isn't there.
So if the normal URL would be https://some.site/my_page.html but the save_as yields https://some.site/index.html
My .rst file meta
:save_as: index.html
The header contains.
<head>
<title>My Page</title>
<!-- Using the latest rendering mode for IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="canonical" href="/my_page.html">
<meta name="author" content="me" />
<meta name="keywords" content="my_page" />
<meta name="description" content="Stuff" />
<meta property="og:site_name" content="Stuff" />
<meta property="og:type" content="article"/>
<meta property="og:title" content="my_pagee"/>
<meta property="og:url" content="/my_page.html"/>
<meta property="og:description" content="Stuff"/>
<meta property="article:published_time" content="2020-03-20" />
<meta property="article:section" content="covid-19" />
<meta property="article:tag" content="Stuff" />
<meta property="article:author" content="me" />
<!-- Bootstrap -->
<link rel="stylesheet" href="/theme/css/bootstrap.min.css" type="text/css"/>
<link href="/theme/css/font-awesome.min.css" rel="stylesheet">
<link href="/theme/css/pygments/native.css" rel="stylesheet">
<link rel="stylesheet" href="/theme/css/style.css" type="text/css"/>
<link href="/css/hpt.css" rel="stylesheet">
</head>
Ideally pelican would save the page to the "normal" URL and to the save_as, or change the canonical URL to be the save_as
You have to go to the template which has the og:url meta and set a jinja2 statement like this:
{% if page.save_as %}
<meta property="og:url" content="/{{ page.save_as }}"/>
{% else %}
<meta property="og:url" content="/{# the previous statement of the theme #}"/>
{% endif %}
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>
<head>
<meta name="description" content="Our description">
<meta name="keywords" content="our keywords">
<link rel="stylesheet" href="/IN/style.css" type="text/css">
</head
Becomes
<head>
<meta name="description" content="Our description">
<meta name="keywords" content="our keywords">
<link rel="stylesheet" href="/IN/style.css" type="text/css">
</link>
</meta>
</meta>
</head>
Multiplied by all the tags in the head it starts to get ridiculous. Making the tags self-closing prevents the behavior, but to the extent the behavior is common (this very site, arstechnica, theverge) I think there should be a workaround to disable the behavior. Is there?