If I use a baseUrl in vue.config.js eg. '/directory1' i also must have base: '/directory1' when setting up vue-router otherwise it will route to '/'.
I want to be able to reference baseUrl in my vue app so I can have
base: baseUrl
in my vue router setup, is this possible?
vue.config.js is just an exported object. There should be no problem in importing this object in your own code to read the baseUrl:
import { baseUrl } from './vue.config.js'
console.log(baseUrl);
Related
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.
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;
I want develop an app with vuejs and php. That can be installed in many directory, like
https://example.com/path1/app,
https://example2.com/path1/p/app,
I don't want to compile vuejs app for each sub path. I have search a lot, but I can't find any solution on this.
How do I set vue js public path dynamically in vuejs 2?
I am using #vue/cli 4.0.5 version.
I have also tried using
<base href="mybase path"/> // it works for my angular app
Please advice me how could do this dynamically?
Please help
I got my answer, just need to put a public path to .
//in vue.config.js file
module.exports = {
...
...
publicPath:process.env.NODE_ENV === 'production'? '.': '/'
}
thank you all
in your app.js file, write like this:
const router = new VueRouter({
mode: 'history',
routes,
base: '/base_url_name'
})
I get the following warning after building my project with vue cli 3:
After some look up I found out that there is no need to create a webpack.config.js as it is written here (or here):
The initial project doesn't require the file to exist because you just created a project with fresh "default" settings that don't require any config.
The Vue CLI documentation offers a vue.config.js which is optional and will be automatically loaded if it's present in the project root. Also it seems possible to work with webpack in the vue.config.js like this.
I'm totally new to webpack and couldn't figure out how to limit the size of my entrypoints with the code splitting that is provided in the message of the warning abouve. Can somebody please give me a hint how to solve this using the vue.config.js file?
We can also split each route's component into separate chunks and only load them when the route is visited.
In your router.js file:
// replace
// import UserDetails from './views/UserDetails'
// with
const UserDetails = () => import('./views/UserDetails')
const router = createRouter({
// ...
routes: [{ path: '/users/:id', component: UserDetails }],
})
For further information read the official documentation.
Try to load your components asynchronously.
Also prefer local component registration over global.
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.