在 VueJS 项目中设置 jsconfig.json答案

【问题标题】：set jsconfig.json in a VueJS project在 VueJS 项目中设置 jsconfig.json
【发布时间】：2020-12-28 20:18:03
【问题描述】：

Vue js 2.6.X，使用 Vue-Cli 4.5.X 创建使用 vue create name

我在根文件夹中添加了一个 jsconfig.json

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

@ 别名有效。我可以做@/store/modules/...

我添加的那个

@/modules/*

不会工作

This dependency was not found:

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

关于如何解决这个问题的任何想法？我检查了几个来源，似乎没有一个考虑到 vue js 和 vue-cli 设置....

我也认为 @/* 是 vue-cli 默认设置...所以按原样添加它可能毫无意义

【问题讨论】：

标签： javascript vue.js vuejs2 vscode-jsconfig

【解决方案1】：

对我有用的还有在 vue.config.js 的 webpack 配置中添加这些别名

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

还要注意，我直接使用了@modules 而不是@/modules 两者都匹配，尝试颠倒顺序以防第一次匹配被激活，但我认为这是通过 webpack 的最长匹配策略

【讨论】：

【解决方案2】：

尝试使用

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

并在您的代码中使用

import object from "@@/module_name";

将寻找 ./src/store/modules/module_name

【讨论】：