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'
})
Related
I'm trying (unsuccessfully) to pre-render the HTML of multiple Vue apps within the same project scaffolded with Vue CLI. I do not want to use Vue Router or Nuxt etc for multiple reasons.
I've tried using prerender-spa-plugin, but since I don't use routes, it only pre-renders the index.
My vue.config.js looks like this:
const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
module.exports = {
pages: {
index: 'src/index.js',
about: 'src/about.js',
},
configureWebpack: {
plugins: [
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, 'dist'),
routes: ['/'],
postProcess(route) {
route.html = route.html.replace('</script><div>', '</script><div id="app" data-server-rendered="true">');
return route;
},
renderer: new Renderer({
headless: true,
renderAfterDocumentEvent: 'render-event',
}),
}),
],
},
};
and my index.js and about.js essentially look like this:
import Vue from 'vue';
import App from './Index.vue';
new Vue({
render: h => h(App),
mounted() {
document.dispatchEvent(new Event('render-event'));
},
}).$mount('#app');
I also have unique public/ index.html and about.html pages.
The routes parameter of prerender-spa-plugin doesn't seem to recognise things like '/about.html'. Is there an easy way of achieving multiple pre-rendered pages?
Do I have to wrestle with the SSR module?
Thanks in advance.
The solution I've found is to call new PrerenderSPAPlugin multiple times, one for each route.
I'm also facing the same issue, i have static html uses vue component and i want to pre-render the vue component in output build directory. I'm using laravel-mix package for build process.
Could you post the full solution for this i.e calling new PrerenderSPAPlugin multiple times, one for each route.
If i can get the full webpack.config.js, it would easy for me to understand and implement the same using laravel-mix.
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.
I'm just started to study how to do an laravel api with vuejs framework and I have a lot of doubts. On of them is: how can I include js files on a specific vue component? Nowadays, I'm importing all my js files on index of my vue client but what I whised it's how to load specific js file on its specific vue component. I've already tried require('assets/path/to/jsfile'), import('assets/path/to/jfsile') and nothing works.
For example:
in my folders I have this structure: myapp -> static -> myjsfolder -> myjsfile
and in my vue-component I want to import my myjsfile. The admin template I'm using is AdminLTE, laravel as backend and webpack as client on vuejs.
Are your js files exporting anything?
If so, try using:
import * as Something from 'assets/path/to/jsfile'
The path will be relative to the component so you may need to use ./ or ../path for example.
Edit: Does the following work? Assuming a single file component is being used:
<script type="text/javascript" src="some/js/file.js"></script>
<script type="text/ecmascript-6">
export default {
...
}
</script>
Within teste.js either add a function:
function printToConsole() {
console.log('working')
}
then later call printToConsole() within your component.
or use an IIFE
(function () {
console.log('working')
})()
I am using Vue.js with Nuxt.js, but I got a problem in router's functions.
In the pure Vue, i can write in main.js like this:
val route = new Router({
routes:{
[...]
}
})
route.beforeEach(to,from,next){
//do something to validate
}
And how to do the same in nuxt.js ? I can not find any file like main.js.
Also, all i know is to deal with the pages folder to achieve router, I can not set the redirect path
please help, thx :)
You can create a plugin for Nuxt
create a plugins/route.js file:
export default ({ app }) => {
// Every time the route changes (fired on initialization too)
app.router.afterEach((to, from) => {
//do something to validate
})
}
and update your nuxt.config.js file:
plugins: ['~/plugins/route']
More details about Nuxt plugins: https://nuxtjs.org/guide/plugins
If anybody might be still interested, it's possible to setup global middleware in nuxt.config.js like this:
router: { middleware: ['foo'] },
then in your middleware/foo.js you do whatever...
export default function({ route, from, store, redirect }) {}
Beware: You can't use this for static sites (nuxt generate), because middleware is not executed on page load, but only on subsequent route changes. Thanks #ProblemsOfSumit for pointing that out.
I am trying to set up SPA routes using history mode as follows:
{
mode: 'history',
routes: [
{
path: '/',
component: Home
},
{
path: '/articles',
component: ArticleList,
children: [
{
path: ':title',
component: ArticleView
}
]
}
]
}
As I am using the history mode routing on vue and on express application I've set up "express-history-api-fallback" as the last middleware in the pipeline:
const app = express();
const root = path.join(__dirname, '../client/dist');
app.use(express.static(root));
/* other middlewares */
app.use(fallback('index.html', {root: root}));
At the moment of a page reload, everything works fine. I.e. loading a url http://application/articles, opens correctly the view, BUT when I try to access the view that takes in a parameter, no matter what, the view does not get loaded and two requests are made to the express.
I.E. a request to http://application/articles/test will resolve into two requests. One to http://application/articles/test and another one to http://application/articles/app.[calculated-hash].js
As far as I understand, the first request fetches the index.html the other request fetches the bundled js script.
Also, on the express app, all routes to api start with 'api' prefix.
Question:
What is wrong with my setup/code using history mode and route params because no routes with parameters are loaded when trying to access them when entering url manually or hitting refresh?
Update:
Using connect-history-api-fallback produces the same results
The problem was with the script tag the webpack injects into the index.html
<script type="text/javascript" src="app.06503cbc260646a996d9.js"></script>
The src attribute value was missing a '/' prefix thus the resolution of files failed.
So to make it work, I've linked the src file like this:
<script type="text/javascript" src="/app.06503cbc260646a996d9.js"></script>
As I am using the webpack to bundle js files, on the webpack config I've added output.publicPath '/'
More info: connect-history-api-fallback bugtracker