Vue-typescript错误：使用webpack别名时路径未找到。

Question

我在使用TypeScript配置Vue项目的webpack别名时遇到了问题，但在使用普通JavaScript时没有遇到同样的问题，这让我感到困惑。

该项目分为两个部分：“app_marketplace”和“app_producer”（类似于管理员），我还有一个用于共享组件和工具的第三个文件夹。

项目文件夹结构如下：

.env.marketplace .env.producer public/ src/ app_marketplace/ app_producer/ app_shared/ vue.config.js tslint files、babel、package.json等

我通过package.json中的脚本分别运行这两个应用程序。例如，"serve:marketplace": "vue-cli-service serve --mode marketplace src/app_marketplace/main.ts"会调用我的.env.marketplace文件，并将env设置为VUE_APP_MARKETPLACE=true。

现在，在我的vue.config.js中，我正在使用环境变量来设置别名。

configureWebpack: {
    resolve: {
        alias: {
            '~': path.resolve(__dirname, 'src/app_shared'),
            '@': path.resolve(__dirname, process.env.VUE_APP_MARKETPLACE ? 'src/app_marketplace' : 'src/app_producer')
        }
    }
}

问题在于很多导入不能正常工作或者会出现错误，从我位于app_marketplace下的main.ts开始。另外一个我无法解释的问题是为什么有些可以正常工作而有些则不能。

import App from './App.vue'
import router from '~/router' // ERROR
import store from '@/store' // ERROR
import '@/plugins'
import '~/directives'
import { DEBUG } from '~/const/debug' // ERROR

我做错了什么？

- Giacomo

Answer 1

你的tsconfig.json应该有一个与Webpack路径别名匹配的paths配置:

{
  "paths": {
    "~/*": [
      "src/app_shared/*",
    ],
    "@/*": [
      "src/*"
    ]
  },
  ...
}

由于文件是JSON格式，您将无法在文件中使用条件路径别名。

- tony19

---

在以下代码中是否存在问题："@/*": ["src/app_marketplace/*", "src/app_producer/*"]？ - Giacomo

除非您在两个目录下拥有相同的目录树（例如，src/app_marketplace/foo/foo.ts 和 src/app_producer/foo/foo.ts），否则执行此操作不应该会出现问题（在这种情况下，将优先采用找到的第一个路径）。 - tony19