I have a VueJs app that is hosted on a subdomain on my server.
I am able to access the base route without problem like so: http://dev.myserver.com/app-basename
However in my routes file I have a route to eg. /fb/:ref. But going to this (http://mdev.myserver.com/app-basename/fb/start) route is returning a 404 page instead.
Here is a piece of my route file:
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
scrollBehavior() {
return { x: 0, y: 0 }
},
routes: [
{
path: '/',
name: 'get-started',
component: () => import('#/views/GetStarted.vue'),
meta: {
layout: 'full',
},
},
{
path: '/fb/:ref',
name: 'fb-get-started',
component: () => import('#/views/GetStarted.vue'),
meta: {
layout: 'full',
},
}
]
})
I added a .htaccess folder to the app-basename folder with FallbackResource /index.html but that also didn't work.
Anyone knows what I can do to fix this?
Related
I'm using vue cli and implemented a multiple page application in vue.config.js:
module.exports = {
pages: {
bla: {
entry: 'src/pages/bla/main.js',
template: 'public/index.html',
title: 'blaaaaa',
},
foo: {
entry: 'src/pages/foo/main.js',
template: 'public/index.html',
title: 'foooooo',
}
}
}
In /router/index.js:
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFoundView.vue },
{ path: '/', redirect: '/bla' },
{ path: '/bla', name: 'Bla', component: () => import('#/views/bla/BlaView.vue') },
{ path: '/foo', name: 'FooView', component: () => import('#/views/foo/MoiView.vue') },
{ path: '/foo/bar', name: 'FooBarView', component: () => import('#/views/foo/FooBarView.vue') },
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
All this works fine, but I don't see how to add a default route for root, although the documentation on Redirect and Alias seems clear. Going to '/' should redirect to '/bla' but vue isn't even detected on the page. Same problem with the NotFound page I tried: vue is not found.
I'm working on a Vue.js webapp. Recently I realized then when I want to change route (going home) from a Vuex action, it takes a lot of time and never end. It take 4600 MB RAM and 70% CPU.
Here is the indicted code:
impostaSelezionabili: ({ commit,dispatch }, payload) => {
commit("associazioniSelezionabiliImpostate", payload)
const prefe = payload.prefe
if (payload.associazioni.length == 1) {
commit("associazioneScelta", payload.associazioni[0].codAssociazione)
dispatch("toolbarManager/setToolbarVisibility", true, {root: true})
router.push({ path: '/' })
}
},
Everything works perfectly without router line, when I add router.push({ path: '/' }) it gets the problem.
Is there a way to solve?
Router config / Routes:
export const router = new Router({
mode: 'history',
routes: [
{ path: '/', component: HomePage, name: "Home", meta: "Home" },
{ path: '/servizi', component: ServiziPage, meta: "Servizi" },
{ path: '/servizi/:id', component: ServizioPage, meta: "Servizi" },
{ path: '/login', component: LoginForm},
{ path: '/corsi', component: Corsi, meta: "Corsi" },
{ path: '/corsidisponibili', component: Corsi, meta: "Corsi disponibili" },
// otherwise redirect to home
{ path: '*', redirect: '/', meta: "Home" }
]
});
Make sure that your router exists and that is not an import of vue-router. You need to use the router that you constructed with the new Router().
But I think that is the best way to solve it - that navigating inside a component after a Promise returned by that action will be resolved because in the current case your action isn`t pure.
I want to serve 2 applications built in Vue.js, both at sub-path like domain.com/apps/tennis/ and domain.com/apps/football/
Both are served behind Traefik with rules like:
Host(`domain.com`) && PathPrefix(`/tennis/`) --> Frontend tennis application
Host(`domain.com`) && PathPrefix(`/football/`) --> Frontend football application
I use vue-router and have settings like for both applications in their respective router.js:
const router = new Router({
mode: 'history',
base: '/apps/tennis',
linkActiveClass: 'active',
linkExactActiveClass: 'exact-active',
scrollBehavior() {
return { x: 0, y: 0 };
},
routes: [
{
path: '/',
redirect: '/home',
},
{
path: "/home",
name: "home",
component: () => import("./views/Home"), // show tennis application home page
}]
});
const router = new Router({
mode: 'history',
base: '/apps/football',
linkActiveClass: 'active',
linkExactActiveClass: 'exact-active',
scrollBehavior() {
return { x: 0, y: 0 };
},
routes: [
{
path: '/',
redirect: '/home',
},
{
path: "/home",
name: "home",
component: () => import("./views/Home"), // show football application home page
}]
});
Both apps have vue.config.js:
module.exports = {
publicPath: '/tennis/'
};
module.exports = {
publicPath: '/football/'
};
Both applications are not loading on browser and I see the following error:
Uncaught SyntaxError: Unexpected token '<'
Can anyone help setting up two different applications at subpath level in Vue.js? I guess I am getting consfused with base and publicPaths.
Can't figure out how to set up routing and why the current configuration doesn't work.
What I'm trying to accomplish:
URL structure:
http://example.com/en
http://example.com/en/about-us
http://example.com/en/sample-page
http://example.com/fr
http://example.com/fr/about-us
http://example.com/fr/sample-page
To handle proper redirection I setup beforeEach:
router.beforeEach((to, from, next) => {
const lang = to.params.lang;
if ( !['en','fr'].includes(lang) ) {
return next('en');
}
if ( i18n.locale !== lang ) {
i18n.locale = lang;
}
return next();
});
And here is the part which I do not understand, why it's not working, why Home component not loading at all.
router.js
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/:lang',
children: [
{
path: '',
name: 'home',
component: Home,
}
],
},
],
})
Language (locale) switching working fine.
You need a component to render route /:lang. You can create a file and add <router-view/> inside or create some anonymous component like:
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/:lang',
component: {
render: h => h('router-view')
},
children: [
{
path: '',
name: 'home',
component: Home,
}
],
},
],
})
I built 2 PWA based on Vue (with Vue UI templates, with router and PWA already set up) but I get on both the same issue: after I add to Homescreen on device, when I open it from the app icon, the router viez doesn't show up and stays blank until I click on a router link. I don't understand why.
Example of one of them, my portfolio:
URL Link
GitHub Link
Some parts of files here that I think related to the issue:
router.js:
export default new Router({
mode: 'history',
base: 'index.html',
routes: [
{
path: '/',
name: 'home',
component: Home
}
]
})
firebase.json:
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
Edit:
Checkout #webmint answer below, probably solve problem im better and clean way.
Orginal Post:
I solved my problem adding an alias to start page in routes (in my case "Login")
in manifest.json:
{
...
"start_url": "index.html",
...
}
in router config:
let router = new Router({
...
routes: [
{ path: '/index.html',
component: Login,
alias: '/'
},
{
path: '/',
name: 'login',
component: Login
},
...
Had same issue. Turns out that solution is quite simple. You have to add/change this in manifest.json
"start_url": "/",
"scope": "/"
At the risk of repeating kaligari's answer, I'd say that the required part is only
{ path: '/index.html', component: Home }
in the router config. You can also use an alias to make it look better on the client. Although, when used as a PWA, this makes no difference since the address bar is not visible.
{ path: '/index.html', component: Home, alias: '/' }
Add the following to your vue.config.js:
pwa: {
workboxOptions: {
navigateFallback: '/index.html',
},
},
If it can help someone, here is what worked for me (after trying a lot of the above solutions and other ones on the web...) :
Context: PWA with Vue.js CLI 3.
Problem: After installing the URL on the "desktop" through the "Add to home screen" option in Safari, clicking on the icon opened a white page.
The same on Android (Chrome) was working perfectly.
I solved it with the following config:
manifest.json
...
"start_url": "/index.html",
...
router.json (includes some Firebase config elements)
//......
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
redirect: {
path: '/projects'
}
},
{
path: '/login',
name: 'Login',
component: Login,
},
{
path: '/projects',
name: 'Projects',
component: Projects,
meta: {
requiresAuth: true
}
},
//......
]
});
router.beforeEach((to, from, next) => {
const requiresAuth = to.matched.some(x => x.meta.requiresAuth);
const currentUser = firebase.auth().currentUser;
if (requiresAuth && !currentUser) {
next('/login');
} else if (requiresAuth && currentUser) {
next();
} else {
next();
}
});
export default router;
vue.config.js
module.exports = {
pwa: {
name: 'Xxxxxxxxxx',
themeColor: '#000000',
msTileColor: '#000000',
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black',
workboxOptions: {
navigateFallback: '/index.html',
},
}
};