Vue is having trouble identifying the src attribute

Question

I recently finished a project utilizing @vue/[email protected] (Babel, TypeScript, Router, Vuex, CSS Pre-processors, Linter/formatter)

After running the command

npm run serve

I encountered the following error message:

These dependencies were not found:

src/config/GlobalConfig in ./src/store/user.ts

The import statement I am using is:

import { GlobalAxios } from 'src/config/GlobalConfig';

After changing it to /src/config/GlobalConfig

I received the following type error:

Cannot find module '/src/config/GlobalConfig' or its corresponding type declarations.

Any suggestions on how to correctly utilize the file in the store?

Answer 1

Answer №1

To ensure proper referencing in your project, it is recommended to use a relative path along with the appropriate file extension.

For example:

import { GlobalAxios } from '../config/GlobalConfig'

Alternatively:

import { GlobalAxios } from '../config/GlobalConfig.js' // Consider .ts for TypeScript files

Or, if webpack alias is set up:

import { GlobalAxios } from '@/config/GlobalConfig.js' // Consider .ts for TypeScript files

Answer 2

To ensure proper referencing in your project, it is recommended to use a relative path along with the appropriate file extension.

For example:

import { GlobalAxios } from '../config/GlobalConfig'

Alternatively:

import { GlobalAxios } from '../config/GlobalConfig.js' // Consider .ts for TypeScript files

Or, if webpack alias is set up:

import { GlobalAxios } from '@/config/GlobalConfig.js' // Consider .ts for TypeScript files