Deploying vite vue.js app with vue router to GitHub Pages with search engines support - vue.js

I am deploying my website powered by vue vith vue-router(history mode) to gituhb pages using vite builder.
So I got a problem: Github Pages is returning 404 error each time I reloading the page with non-root path.
Adding cp dist/index.html dist/404.html seems like solution. The page is displaying correctly but GitHub is returning 404 status. And this is an important problem because search engines skipping paths in my sitemap.xml that returns 404 status code. That is, all non-root paths.

Related

problem laravel in resources js app.js not found

I install websockets,pusher js , echo, and do every thing in the laravel docs
but i have a problem
GET http://127.0.0.1:8000/resources/js/app.js net::ERR_ABORTED 404 (Not Found)
I try to remove file from resources location to public but have the same problem

Statically served vue-router app by Flask shows 404 for custom pages on Heroku

I've gone through several Stack Overflow pages and the official Vue guide, but my app still returns 404 results when going to a different page.
The structure of my app looks like this, with a client folder that has the Vue app and a server folder containing app.py that statically serves the index.html in the client/dist folder through Flask.
Contents of static.json are as outlined in the guide:
{
"root": "client/dist",
"clean_urls": true,
"routes": {
"/**": "index.html"
}
}
with just modified root folder to go to client/dist. Running the app locally with npm run serve works, as does opening it up on its Heroku page and clicking on the nav. However, directly going to a page, such as /translate, always returns 404.
I have installed the following buildpacks:
=== readiglot Buildpack URLs
1. heroku/nodejs
2. heroku/python
3. https://github.com/heroku/heroku-buildpack-static
The app is hosted here: https://www.readiglot.herokuapp.com.
On npm run build from the root directory, the dist folder is built by Heroku in the client folder.
Am I missing something? Could anyone advise as to additional configuration?
The answer is in the app.py file - you need to statically serve the file using a catch all route.
#app.route("/", defaults={"path": ""})
#app.route("/<string:path>")
#app.route("/<path:path>")
def index(path):
return app.send_static_file("index.html")
By putting the serve_static_file in the Flask app to redirect from all other routes, 404 only shows up on a true 404.

NuxtJS routing error: Page not found when navigating to an existing route

Just started using Nuxt, and I love it so far. I just have one specific issue, I'm using prismic.io as headless CMS for my personal page. I have a few pages and a "blog" page. I'm having an issue when navigating to the blog route, it returns page not found. Now, it's kind of odd because it's working perfectly in my local host, it's just behaving that way when deployed.
Site's being deployed on Netlify.
I already tried switching the route's links and building the project on my local machine and it's working like charm.
Link to site:
https://wonderful-gates-27a024.netlify.com/
This is my file structure for the pages:
Pages/
-- blog/
---- _uid.vue
-- About.vue
-- Blog.vue
-- Contact.vue
-- Works.vue
-- index.vue
Steps to replicate the issue
Navigate to about
Navigate to contact
Navigate to blog (Sometimes the error shows on this step)
Click on an article
Navigate back to the blog (here it should display not found)
Steps to navigate back to blog after the error shows up:
On the url bar, paste wonderful-gates-27a024.netlify.com/blog and hit enter.
I'm getting page not found error
It works sometimes because you are navigating to
https://wonderful-gates-27a024.netlify.com/blog/
Which is different from
https://wonderful-gates-27a024.netlify.com/blog
the page which is /blog
https://wonderful-gates-27a024.netlify.com/blog
doesn't exist while the page
https://wonderful-gates-27a024.netlify.com/blog/
exists. which is /blog/_uid
so if you want it to work make
Pages/
-- blog/
---- _uid.vue
---- index.vue// make this file and the /blog will work
-- About.vue
-- Blog.vue
-- Contact.vue
-- Works.vue
-- index.vue
We just had this error occur and it was caused by renaming About.vue to about.vue on a MacOS machine.
Git doesn't recognize it as a new file, so when you deploy the app on a Linux machine, the problem occurs.
The solution is to rename the file from a Linux machine, so that git recognizes it.
You could also probably accomplish it by renaming the file from Blog.vue to new-blog.vue and then renaming it again to blog.vue.
This is all caused by the fact that files aren't case sensitive on MacOS but they are on linux. You will see it where you have:
<NuxtLink :to="{ name: 'blog' }">
It must be blog.vue to match the route name because the filename leads to the route name. On Linux, the crawler will name the route "Blog" if it is Blog.vue.
You don't want uppercase filenames with nuxt, because they will lead to URLs such as /Blog. I don't recommend having uppercase in your pages directory.
We've now released the updated nuxt-prismic module to solve this dynamic routes issue and enable previews. You see how to migrate your project by following this article:
https://prismic.io/docs/vuejs/getting-started/the-new-prismic-nuxt-module
Also you can see a project enabled with the module already here:
https://user-guides.prismic.io/en/articles/2831943-nuxt-js-sample-multi-page-website-with-navigation

Polymer 2 site cant find resources in Safari

I built this site http://danielleandsteven.wedding/ and it loads fine in most browsers. In Safari, I get a lot of errors that it cant load resources and the my-app elem is empty.
A quick glance of the list of 404 resources- it looks like some of them are for nonexistent components and others are in /bower_components/ but its looking for them in the base directory.
I tried it on Edge 15 and I got
Object doesn't support property or method 'call'.
You could add the Babel Polyfills?
https://babeljs.io/docs/usage/polyfill/
it adds some basic function that babel code may depend on - and as you probably served transpiled ES5 code (with babel) to those browsers it might be your problem.

angular 2 router index.html sharepoint

I have a angular 2 SPA running from within a SharePoint 2010 document library. However, I have a problem with routing. When I start the application by running "index.html", the link in the browser shortly displays:
<server>/scripts/angular_app/index.html
When the application is loaded it changes to:
<server>/scripts/angular_app/#/information-system
'information-system' is the default route of my application.
So far, so good.
If I do a reload of the page now, SharePoint loads its default view:
<server>/scripts/angular_app/Forms/AllItems.aspx
This is because the routing removes the 'Index.html' from the url and SharePoint loads the default which is 'AllItems.aspx' and not 'index.html'.
Is there any way of telling the angular 2 routing system to leave the 'index.html' bit in the url?
Thanks for any help!
Joachim
I added following line to index.html to keep index.html in the URL all the time:
<base href="/index.html">
I solved my issue by extending the base href with the filename at compile time:
ng build --dev --bh /scripts/filingangular/index.html
I was not aware that you could put an actual filename here.