After making changes to the vue.config.js file, updating the host parameter to web-dev.test.ru in order to work with a public network, we encountered an issue where external network links still led to localhost
The routes stopped working and were no longer clickable
The Menu component contains elements where the routes are assigned
<nav class="flex-grow md:block px-4 pb-4 md:pb-0 md:overflow-y-auto">
<router-link v-for="m in menu" :key="menu.id" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 dark-mode:bg-gray-700 dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
:to="m.url"> {{m.name}} <IconComponent style="float: right" :width="16" :height="16" :iconsvg="ic(m.icon)"></IconComponent></router-link>
</nav>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType, } from "vue";
import { UsersInterface } from "@/models/interfaces/Users.interface";
import menu from "../../../public/static/data/menu.json"
import IconComponent from "@/components/icons/Icons.component.vue";
import RootState from "@/store/root"
export default defineComponent({
components: {
IconComponent
},
props: {
},
emits: ['selectmenu'],
setup(props, {emit}) {
const onUserSelect = (user: UsersInterface) => {
user.selected = !user.selected;
// console.log("onUserSelect", user.IDuser, user.selected);
emit('selectmenu', user)
};
const ic = (icon: string) => {
console.log("onloadicons getters");
return RootState.getters["iconStore/getSvg"]({ Nameicon: icon });
};
return {
onUserSelect,
menu,
ic
};
},
});
File - vue.config.js
module.exports = {
devServer: {
proxy: 'http://localhost:89/',
host: 'web-dev.test.ru',
port: '8080',
public: 'http://web-dev.test.ru:8080',
disableHostCheck: true,
overlay: {
warnings: true,
errors: true
}
},
configureWebpack: {
devtool: 'source-map'
}
}
File containing routes for my application
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'
import Auth from '../views/Auth.vue'
import RootState from '../store/root'
import Inbox from '../views/Inbox.vue'
import Outbox from '../views/Outbox.vue'
import Load from '../views/Load.vue'
const routes: Array<RouteRecordRaw> = [
{
path: '/auth',
name: 'Auth',
component: Auth,
},
{
path: '/main',
name: 'Home',
component: Home
},
{
path: '/inbox',
name: 'Inbox',
component: Inbox
},
{
path: '/outbox',
name: 'Outbox',
component: Outbox
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
Main.ts file
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import RootState from './store/root'
import './index.css'
//sync(RootStore, router)
createApp(App).use(RootState).use(router).mount('#app')