在VueJS项目中设置jsconfig.json

Question

使用 vue create name 命令，基于 Vue-Cli 4.5.X 创建 Vue js 2.6.X 项目。

我在根目录下添加了 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的默认设置...所以添加它可能是毫无意义的。

- Liad Goren

Answer 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实现最长匹配策略。

- CharybdeBE

---

这是正确的答案，因为Vue不尊重也不关心tsconfig.json和/或jsconfig.json。更具体地说，我们应该始终确保TS的compilerOptions.paths和webpack的resolve.alias同步：一个用于IDE支持，另一个用于构建步骤。 - phil294

更具体地说，使用 chainWebpack 会更加美观：chainWebpack: (config) => config.resolve.alias.set('@api', path.resolve(__dirname, '..', 'some', 'folder'))。另请参见此 GitHub 问题。 - phil294

Answer 2

尝试使用

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

在你的代码中使用

import object from "@@/module_name";

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

- Jon Fleming