Question

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

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

项目文件夹结构：

.env.marketplace
.env.producer
public /
src /
- app_marketplace /
- app_producer /
- app_shared /
vue.config.js
tslint文件，babel，package.json等。

我与package.json中的脚本分开运行这2个应用。

例如，"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，因此您将无法在文件中执行条件路径别名。

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

1 个答案: