javascript - 在 VueJS 项目中设置 jsconfig.json

Question

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 默认设置...所以添加它可能毫无意义

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 的最长匹配策略