We Keep Coding

plugin:vite:import-analysis: Failed to resolve import "../../views/main/index" from "src/router/module/mobile-routes.js". Does the file exist?

In my Vue JS application, I have the following js inside src/router
index.js
import { createRouter, createWebHistory } from 'vue-router'
import { isMobileTerminal } from '../utils/flexible'
import mobileRoutes from './module/mobile-routes'
import pcRoutes from './module/pc-routes'
// 创建 vueRouter实例
const router = createRouter({
history: createWebHistory(),
routes: isMobileTerminal.value ? mobileRoutes : pcRoutes
})
export default router
And I have the following mobile-routes.js inside src/router/module
export default [
{
path: '/', // 路径
name: 'home', // 当前路由名字
component: () => import('../../views/main/index') // 对应的组件
}
]
Then I have a component called, index.vue inside src/views/main
<template>
<div>
移动端首页
</div>
</template>
<script setup>
export default {
name: 'index'
}
</script>
<style lang="scss" scoped></style>
Every time I tried to run my application, it kept giving me the following errors:
[plugin:vite:import-analysis] Failed to resolve import "../../views/main/index" from "src/router/module/mobile-routes.js". Does the file exist?
ERROR as shown in the figure
enter image description here
I'm using tailwind CSS ，vite and Vue 3

The error is caused by vite,need to add a suffix, that is .vue in vite.
Alter mobile-routes.js inside src/router/module
export default [
{
path: '/', // 路径
name: 'home', // 当前路由名字
component: () => import('../../views/main/index.vue') // 对应的组件
}
]
I find the right answer at this websiteenter link description here

Vue separation of concerns causes Failed to mount component: template or render function not defined

I am new to vue and trying to separate my ts/scss from the main vue file.
I am using kebab-casing as stated in the styleguide and because it's familiar to me:
https://v2.vuejs.org/v2/style-guide/#Single-file-component-filename-casing-strongly-recommended
Here is my app.vue:
<template>
<div id="app">
<the-header #onExpanded="setExpanded($event)" />
<router-view />
<the-footer />
</div>
</template>
<script src="./app.ts" lang="ts"></script>
<style src="./app.scss" lang="scss"></style>
As you can see I am including my app.ts and app.scss.
In my TypeScript file I have this:
import { defineComponent, ref } from "#vue/composition-api";
import { useQuery, useResult } from "#vue/apollo-composable";
import * as pageCollection from "#/graphql/query.pages.gql";
import TheFooter from "#/components/layout/the-footer/the-footer";
import TheHeader from "#/components/layout/the-header/the-header";
export default defineComponent({
name: "App",
components: { TheFooter, TheHeader },
setup() {
const expanded = ref(false);
const { result } = useQuery(pageCollection);
const pages = useResult(result, null, (data) => data.pageCollection);
return { expanded, pages };
},
methods: {
setExpanded(value: boolean) {
this.expanded = value;
console.log(this.expanded);
},
},
});
Here I am trying to include my header and footer.
My folder structure looks like this (with part of the-header.vue):
Here is my header TypeScript:
import { defineComponent, ref } from "#vue/composition-api";
export default defineComponent({
name: "TheHeader",
setup() {
const isExpanded = ref(false);
return { isExpanded };
},
data() {
return {
isExpanded: false,
};
},
emits: ["onExpanded"],
methods: {
expand() {
this.isExpanded = !this.isExpanded;
this.$emit("onExpanded", this.isExpanded);
},
},
});
The problem is, when I try to run the application. I get this error:
The console log at the bottom is actually from my footer, which tells me it is finding the component fine. Is there something else I need to do in order to get the components to render?

It's the import in app.ts, it is currently:
import TheFooter from "#/components/layout/the-footer/the-footer";
import TheHeader from "#/components/layout/the-header/the-header";
abut should be:
import TheFooter from "#/components/layout/the-footer/the-footer.vue";
import TheHeader from "#/components/layout/the-header/the-header.vue";

Vue Router: Cannot read property 'forEach' of undefined at createRouterMatcher

Trying to implement vue router. Getting the error:
Cannot read property 'forEach' of undefined
at createRouterMatcher
Vue Version: #vue/cli 4.5.9. I have two views/pages already formatted and ready to implement. My home page will be basically be the index.vue. Ive tried playing around with index.js and main.js but can't seem to get it to work.
src/main.js
import { createApp } from 'vue'
import { routes } from './router/index'
import { createRouter, createWebHistory } from 'vue-router'
require('dotenv').config();
import App from './App.vue'
import './index.css'
let app = createApp(App)
let router = createRouter({
history: createWebHistory(),
routes,
})
app.use(router)
app.mount('#app')
src/router/index.js
import Index from '../views/index.vue'
import About from '../views/about.vue'
const routes = [
{
path: "/",
name: "Index",
component: Index
},
{
path:"/about",
name: "About",
component: About
}
]
export default routes;
src>App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
Both my views index.vue & about.vue both have export default { name: 'pagename'} accordingly

You're using a default export, which means routes is not a named export and shouldn't use brackets. This will fix the problem:
import routes from './router/index' // no brackets
But I recommend doing all of the router setup in the router file and exporting the router instead of the routes:
router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Index from '../views/index.vue'
import About from '../views/about.vue'
const routes = [
{
path: "/",
name: "Index",
component: Index
},
{
path:"/about",
name: "About",
component: About
}
]
let router = createRouter({
history: createWebHistory(),
routes,
})
export default router;
main.js
import { createApp } from 'vue'
import router from './router/index'
require('dotenv').config();
import App from './App.vue'
import './index.css'
let app = createApp(App)
app.use(router)
app.mount('#app')

Vue2: How to redirect to another page using routes

How can I redirect to another vue page from my script code. I am using router.push() but cannot redirect to my desired vue page.
Following is my source code.
src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HomePage from '#/components/HomePage'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'IndexPage',
component: IndexPage
},
{
path: '/homepage',
name: 'HomePage',
component: HomePage
}
]
})
src/components/IndexPage.vue
<script>
import VueRouter from 'vue-router'
export default {
name: 'IndexPage',
methods: {
redirectUser() { // this method is called on button click
if (1 == 1)
{
router.push('/homepage');
//this.$router.push('/homepage');
}
}
}
}
</script>
After running this code I am getting error which states:
ReferenceError: router is not defined at eval
src/main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
window.Vue = Vue
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
Furthermore, I can access that same link from browser http://localhost:8080/#/homepage. But cannot redirect to it from my script code.

import Vue and VueRouter
and then call
Vue.use(VueRouter)
then in your method,
this.$router.push({name: 'HomePage'})
EDIT
You need to import both Vue and Vue Router if you want to use it in your code, that's why you are getting router is not defined at eval.
And also use
this.$router.push('/homepage');
Try this in your src/components/IndexPage.vue
<script>
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default {
name: 'IndexPage',
methods: {
redirectUser() { // this method is called on button click
if (1 == 1)
{
this.$router.push('/homepage');
}
}
}
}
</script>

Use your component instance property to access the router:
this.$router.push({name: 'HomePage'})
And do you have it in your app?
new Vue({
router,
render: h => h(App)
}).$mount('#app')

Thanx for the feedback friends. I was not importing my router file on my vue. The updated line of code is:
src/components/IndexPage.vue
<script>
import router from '../router/index.js' // Just added this line and code works !!
export default {
name: 'IndexPage',
methods: {
redirectUser() { // this method is called on button click
if (1 == 1)
{
router.push({name: 'HomePage'})
}
}
}
}
</script>

You can try the following code:
function redirect(page) {
window.location.href = page;
}

Where to import component in Vue?

New to Vue, working off a scaffolded project from the command line. Currently I have:
index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home
from '../components/home'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
}
]
})
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
#app {
// default styles are here
}
</style>
And home.vue
<template>
<chart-component></chart-component>
</template>
// rest of home
I am trying to create and import chart-component.vue to use inside home.vue but not sure where to import it at. I've tried adding it in main.js and App.vue unsuccessfully.
chart-component.vue
<template>
<div>
<h1>Testing Chart Component</h1>
</div>
</template>
<script>
export default {
name: 'chart',
data() {
return {
}
}
}
</script>
This seems like a simple problem but unsure how to solve it. My best guess was importing it inside App.vue and adding a components { ChartComponent } underneath the name. Second attempt was importing it into main.js and putting ChartComponent inside components: { App, ChartComponent }.

I would rename your component to ChartComponent from chart-component, as the dash is not a supported character. Vue will properly convert the name to dashes as needed, but when you're searching your code for components, it helps to have consistent names.
anyway. for using a component, you need to import it and define it first
home.vue:
<template>
<ChartComponent></ChartComponent>
</template>
<script>
import ChartComponent from './ChartComponent';
export default {
components: {
ChartComponent
}
}
</script>

Got it to work. Since I only need it locally inside the home.vue component I imported it inside there under data I added
components: {
'chart-component': ChartComponent
}

Importing component becomes much easier in Vue 3 script setup SFCs
<script setup>
import ChartComponent from './components/ChartComponent.vue'
</script>
<template>
<ChartComponent />
</template>