4

Vue js 2.6.X, create with Vue-Cli 4.5.X using vue create name

I've added a jsconfig.json inside the root folder

  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@/modules/*": ["./src/store/modules/*"]
    }
  },
  "exclude": ["node_modules", "dist"],
  "include": ["src/**/*"]
}

the @ alias works. I can do @/store/modules/...

the one I've added

@/modules/*

won't work

This dependency was not found:

* @/modules/... in in ./node_modules/cache-loader/dist/cjs...

any idea on how I can resolve this? I've checked several sources, none seem to take vue js and vue-cli setup into account....

I also think that @/* is a vue-cli default setup...so adding it maybe pointless as is

Liad Goren
  • 299
  • 1
  • 4
  • 18

2 Answers2

2

What have worked for me is also adding those alias in the webpack configuration in the vue.config.js 

    configureWebpack: {
        resolve: {
            alias: {
                '@': path.resolve(__dirname, vueSrc),
                '@modules': path.resolve(__dirname, vueSrc + 'store/modules')
            },
            extensions: ['.js', '.vue', '.json']
        }
    }

Note also that i used directly @modules and not @/modules which would match both, try inverting the order in case something like first match is actevated, but i think it is longest match policy via webpack

CharybdeBE
  • 1,791
  • 1
  • 20
  • 35
  • This is the correct answer because Vue does not respect nor care for `tsconfig.json` and/or `jsconfig.json`. More specifically, one should always make sure that both TS `compilerOptions.paths` and webpack `resolve.alias` are in sync: One for IDE support, the other for the step build. – phil294 May 22 '22 at 23:52
  • ...more specifically, this is even prettier with `chainWebpack`: `chainWebpack: (config) => config.resolve.alias.set('@api', path.resolve(__dirname, '..', 'some', 'folder'))`. See also [this GitHub issue](https://github.com/vuejs/vue-cli/issues/2398) – phil294 May 23 '22 at 00:12
0

Try using

"@@/*":["./src/store/modules/*"]

and in your code use

import object from "@@/module_name";

will look for ./src/store/modules/module_name

Jon Fleming
  • 1
  • 1