set jsconfig.json in a VueJS project

14.2k views Asked by At

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

2

There are 2 answers

0
Jon Fleming On

Try using

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

and in your code use

import object from "@@/module_name";

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

2
CharybdeBE On

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