Webpack别名的Vue-Typescript错误，找不到路径

Question

我在使用打字稿的vue项目上配置webpack别名时遇到问题。 如果我使用普通的javascript，则不会遇到相同的问题，因此我很困惑

该项目分为2个，“ app_marketplace”，“ app_producer”（类似于admin），我还有一个用于共享组件和实用程序的第3个文件夹。

项目文件夹结构：

• .env.marketplace
• .env.producer
• 上市/
• SRC /
  • app_marketplace /
  • app_producer /
  • app_shared /
• vue.config.js
• tslint文件，babel，package.json等。

我将2应用程序与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我正在使用env变量来设置别名。

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

问题是，从main.ts内的app_marketplace开始，许多导入无法正常工作或给我错误。 我无法解释的另一件事是为什么其中一些有效而有些无效。

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

我究竟做错了什么？

Answer 1

tsconfig.json应该具有与Webpack路径别名匹配的paths配置：

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

由于文件是JSON，因此您将无法在文件中执行条件路径别名。