I am using the NestJS ServeStaticModule to resolve my admin and client front-ends to two different paths, /client and /admin.
When we try to load this page Vue is attempting to load the JS, CSS and other local assets without the /{prefix} in-front resulting in a 404.
Is there a way to work around this, do I need to define at a Vue level what the route is going to be prior to building?
My solution was to add the pass path to my VueRouter when in production. For example if you are trying to replicate this is how it would look:
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const router = new Router({
mode: 'history',
base: (process.env.NODE_ENV === 'production' ? '/admin' : undefined ),
routes: [...]
});
export default router;
Related
I read online that the hashtag in the url is caused by not using history in the vue router.
Currently, I am working on a big project and it would be a timewaste to start over and select history mode in the terminal.
That is why I would like to ask if it is possible to use switch to history mode while the vue project is already generated?
This is my url: http://localhost:8081/#/
The default mode for Vue router is hash-mode. You don't need the install the whole app again, just update the mode to history mode in your app where you have defined the vue router as follow:
For router v3:
const router = new VueRouter({
mode: 'history'
})
For router v4:
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
})
For reference:
https://next.router.vuejs.org/guide/#javascript
I use a Vue Starter Template:
Vite + Vue 3 + Tailwind CSS (starter) ⚡
Tailwind CSS v3.0.0-alpha ⚠
Vue Router 4.x
The App should run in a subdirectory like: domain.com/VueApp and i followd the manpage of router vuejs to add a baselike this:
const router = createRouter({
history: createWebHistory(),
base: '/VueApp/',
routes,
})
But the <router-links> still ignore that base entry.
I don´t know if I understood you correctly, but if you want the url have /VueApp/ in it, you need to change it for the createWebHistory(). Like this:
const router = createRouter({
history: createWebHistory('/VueApp/'),
base: '/VueApp/',
routes,
})
base declares where your app is located at the domain, but still would run without the given path.
My site is hosted on the IIS and accessable as machinename/test/.
When i try to open site as machinename/test/ route become machinename/test/#/, and all assets are loading as expected.
But if i open as machinename/test route become machinename/test#/, and assets paths break.
How can i fix it? I want when going to machinename/test the path was becoming machinename/test/#/.
It's a little hacky, but this should work:
Before the VueRouter instantiation, add:
if (!window.location.pathname.endsWith('test/')) {
window.location.replace(
`${window.location.href}`.replace(
window.location.pathname,
`${window.location.pathname}`.replace(
'/test',
'/test/')
)
)
}
GO to your routes.js and change this
const router = new VueRouter({
routes: []
to this
const router = new VueRouter({
mode: 'history',
routes:[]
})
Rebuild your project and re-upload
Vue reference: https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
So In my laravel app we have a url say
http://mywebsite.in/wfengine/search/
Now I want to use the laravel router to work on the above link , but nothing seems to be happening.
Router.js
import VueRouter from 'vue-router';
let routes = [
{
path:'/filters',
componenet: require('./views/filter')
}
];
export default new VueRouter({
routes
});
App.js
`import router from './routes';
// import './core/searchableCards';
var app = new Vue({
el:'#ep_result_1',
router
})`
HTML
<router-link to="/filters">Search Page</router-link>
Now on the page which is loaded by laravel , I get following url in the browser
http://mywebsite.in/wfengine/search/#filters
But the template is not loading , can anyone help me out with this
According to me the Vue Router is just doing some Dom hide and show so it should not be effected by the base url right ?
Vue router mounts the components (defined in the routes array).
So if you defined a laravel routes to wfengine/search/ for the (e.g.) search.blade.php there should be the <router-view></router-view> dom element, as the doc says.
After that you should define the vue-router:
const router = new VueRouter({
mode: 'history',
routes
})
The routes variable is the routes array, the mode is for use the vue routing without # (http://mywebsite.in/wfengine/search/#filters -> http://mywebsite.in/wfengine/search/filters).
After that you should register the url (wfengine/search/filters) in the web route in laravel, what is give back the search.blade.php or that "base page" what contains the <router-view> dom.
So 1. there should be a base php view, what contains the <router-view>.
2. Then register the urls in the server side what gives back the same base view. 3. Then the vue-router will decide which component should be loaded by the end of the url.
At the end of your routes/web.php file just put the below code. This tricks works for me.
// At the end of the file
Route::get('/{vue_capture?}', function () {
return view('welcome');
})->where('vue_capture', '[\/\w\.-]*');
Of course you have to put a <router-view></router-view> into your layout or blade file.
Is it possible to access the VueRouter outside of Vue components.
I've tried importing Vue in a JavaScript file. In this file I can access Vue.http but not Vue.router or Vue.$router. The last 2 return undefined.
main.js
import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import routes from './config/routes'
import store from './store'
import * as rootUrl from './config/rootUrl'
//Routing support
Vue.use(VueRouter);
//Backend support
Vue.use(VueResource);
const router = new VueRouter({
mode: 'history',
routes: routes
})
new Vue({
store,
router,
}).$mount('#app')
Vue.http.get(rootUrl.url, {Accept: "application/json"}).then(response => {
let data = response.body
store.commit('SET_APP_DATA', { data: {
'title': data.title,
'peopleUrl': data.people,
'eventsUrl': data.events
}})
store.commit('SET_READY')
})
I've used it only from components but you could try following in case you're using common boilerplate where routes are defined under router/index.js then you just import it like:
import Router from '../router';
After it is possible to use it in code e.g.
Router.push('/mypage')
Not sure if it works but give it a try.
I resolved this by exporting my router instead of my routes in routes.js (now router.js)
export default new VueRouter({
mode: 'history',
routes: routes
})
Any file can then access the router with
import router from 'config/router'
You've defined your router with this statement
const router = new VueRouter({
mode: 'history',
routes: routes
})
So all you need to do to access it outside Vue is use
router.push(...)
Or whatever else you want to do.
If you want to use it in some other file, you may need to expose it on the window.
Add the router to your Vue constructor in the same file that you create and initialize your vue instance.
Vue.$router = router
Then use it as you first tried.
Vue.$router.push(...)
If using Typescript, you can augment the VueContructor to enable type checking and autocompletion.
mytypes.d.ts
import {VueRouter} from "vue-router/types/router";
declare module 'vue/types/vue' {
interface VueConstructor {
$router: VueRouter
}
}