We Keep Coding

Vue webpack devServer proxy prepending fetch url with vue-router params

I have vue3 project using a webpack devServer proxy and keep getting a 404 when running a fetch to an api due to the url being prepended with an incorrect value. This only occurs on pages that are using vue-router params.
example page url is -
http://localhost:8081/edit/206
correct fetch url should be -
http://localhost:8000/api/enquiries/getenquiry/206
actual fetch url -
http://localhost:8000/edit/api/enquiries/getenquiry/206
fetch command -
let response = await fetch(`api/enquiries/getenquiry/${id}`, {
method: 'GET',
})
vue-router -
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import NewEnquiries from '../views/enquiries/NewEnquiries.vue'
import EditEnquiry from '../views/enquiries/EditEnquiry.vue'
import MailboxesView from '../views/system/mailboxes/MailboxesView.vue'
const routes = [
{ path: '/', name: 'home', component: HomeView },
{ path: '/new', name: 'new', component: NewEnquiries },
{ path: '/edit/:id', name: 'editenquiry', component: EditEnquiry },
{ path: '/mailboxes', name: 'mailboxes', component: MailboxesView }
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
vue.config.js -
const { defineConfig } = require('#vue/cli-service')
const AgentKeepAlive = require('agentkeepalive');
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8000',
changeOrigin: true,
logLevel: 'debug',
agent: new AgentKeepAlive({
maxSockets: 100,
keepAlive: true,
maxFreeSockets: 10,
keepAliveMsecs: 100000,
timeout: 6000000,
freeSocketTimeout: 9000000 // free socket keepalive for 9000 seconds
}),
onProxyRes: (proxyRes) => {
const key = 'www-authenticate';
proxyRes.headers[key] = proxyRes.headers[key] && proxyRes.headers[key].split(',');
}
}
}
}
})
What works -
adding the following pathRewrite to remove the prepended "edit" acts a workaround but obviously not a good solution going forward. Where am i going wrong here?
pathRewrite: { '^/edit': '' }

use vue-cli-plugin-windicss, the import statement in router is invalid

My vue-cli version is 5.0.8
I use vue-cli to create a new projectvue create winditest,I choose vue3.x,router,ts,babel
After creating，I run vue add windicss in this project
When the download is complete，I edit a route under the route file
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'home',
redirect: '/home',
children:[
{
path:'home',
component:()=>import('#/views/Home/index.vue')
}
]
}
]
When I start the project, I get these errors
When I remove the import statement or remove vue-cli-plugin-windicss in package.json and restart, the project works fine

vue.js: cannot acces public folder after incorporation of vue-router

I have a vue.js project where I play audio files that are stored in my public folder:
Previously, I was able to access and play these files as such:
path = 'recordings/Behar/weekday/1.mp3'
this.audio = new Audio(path);
this.audio.play()
But after adding the vue-router in main.js:
const routes = [
{ path: '/', component: Controller },
{ path: '/date/:date', component: Controller },
{ path: '/date/:date/aliyah/:aliyah', component: Controller },
{ path: '/date/:date/aliyah/:aliyah/verse/:verse', component: Controller },
]
const router = new VueRouter({
mode: 'history',
routes // short for `routes: routes`
})
Vue.use(VueRouter)
Vue.config.productionTip = false
new Vue({
router,
vuetify,
render: h => h(App)
}).$mount('#app')
When I try to play these recordings I see this message:
Uncaught (in promise) DOMException: Failed to load because no supported source was found.
I believe that somehow adding the vue-router has screwed up with my access to the public folder.
Why am I no longer able to access the public folder and how (and if at all) has vue-router changed that?

With the routing, I found that to access the publicPath I need to append a '/' in front of my path:
path = '/recordings/Behar/weekday/1.mp3'

electron blank screen after build with vue-cli-service electron:build

I have tried the following things to remove the blank screen from my electron app:
(1) In background.js comment out createProtocol and loadURL('app:...') and instead use path.join():
if (process.env.WEBPACK_DEV_SERVER_URL) {
win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
if (!process.env.IS_TEST) win.webContents.openDevTools()
} else {
createProtocol('app')
// Load the index.html when not in development
// win.loadURL('app://./index.html')
win.loadURL(path.join(__dirname, 'bundled/index.html'));
}
(2) Set router mode to 'hash':
const router = new VueRouter({
mode: process.env.IS_ELECTRON ? 'hash' : 'history',
base: process.env.BASE_URL,
routes
})
(3) Pass created() hook with '/' route to newly created Vue instance:
new Vue({
router,
store,
vuetify,
render: h => h(App),
created() {
// Prevent blank screen in Electron builds
this.$router.push('/')
}
}).$mount('#app')
Nothing of this worked, what else could be wrong?

I could partially solve it. First I had to see some error message, which you can do by installing electron-unhandled and use it in background.js like this:
const unhandled = require('electron-unhandled');
unhandled({
showDialog: true
});
unhandled.logError(new Error('Test'), {title: 'Custom Title'});
The message was:
Error: Image could not be created from
C:/Users/.../app.asar/my-tray-icon-2.png
This is an issue in the newest Electron version: https://github.com/electron/electron/issues/24221
It is unsolved yet, but what you can do it passing the icon path with nativeImage inside the new BrowserWindow instance like this:
import { ..., nativeImage, ... } from 'electron'
win = new BrowserWindow({
...
icon: nativeImage.createFromPath('C:\Users\...\my-tray-icon-2.png'),
...
})

Vue.js routes serving from subdirectory

I would like to serve my Vue.js app from a subdirectory on a staging server. For example: http://url.com/subdir/app/
Right now if I do this and set up the build config assetsPublicPath to serve from that folder, all the assets are served fine but my app does not get routed correctly. The "home" page gets routed to the 'catch-all', and any further routes simply show the normal white-page 404.
Here is my router:
export default new Router({
mode: 'history',
routes: [
{
path: '/',
component: ContentView,
children: [
{
path: '/',
name: 'DataTable',
component: DataTable,
meta: { requiresAuth: true }
},
// ===================================
// Login
// ===================================
{
path: '/login',
name: 'AppLogin',
component: AppLogin,
meta: { checkAlreadyLoggedIn: true }
},
{
path: '/logout',
name: 'AppLogout',
component: AppLogout,
meta: { requiresAuth: true }
}
]
},
{
path: '*',
component: ContentView,
children: [
{
path: '/',
name: 'NotFound',
component: NotFound
}
]
}
]})
And here is the necessary config/index.js changes: assetsPublicPath: '/subdir/app/'
In local development the routes work fine. But on the staging server all static assets, the built JS and CSS etc all serve fine. However the home route shows the catch-all. I am assuming it's because my routes are not set up correctly, or because I need to do something to serve from a subdirectory in production.

The assetsPublicPath config is just for webpack assets. For vue-router, you need to set the base option in the constructor.
See docs: https://router.vuejs.org/en/api/options.html#base

I have been able to solve this, using the base property of vue-route.
In the case of the example it would look like this:
export default new Router({
mode: 'history',
base: '/subdir/app/',
routes: [
{
path: '/',
component: ContentView,
children: [
My question now is how can I make this subdirectory dynamically.
Imagine a single server, and 2 different urls pointing to this server.
www.dominio / app1
www.dominio / app2