웹 팩 별칭의 Vue 형식 오류, 경로를 찾을 수 없음

웹 팩 별칭의 Vue 형식 오류, 경로를 찾을 수 없음

웹 팩 별칭을 vue 프로젝트에서 형식 지정으로 구성하는 데 문제가 있음.일반 자바스크립트를 사용하는 경우에도 같은 문제가 발생하지 않아 혼란스러움

프로젝트는 2, "app_marketplace", "app_producers"(관리자와 같음)로 나뉘는데, 나 또한 공유 컴포넌트와 유틸리티를 위한 세 번째 폴더를 가지고 있다.

프로젝트 폴더 구조:

• .env.properties
• .env.properties
• 공적인/공적인
• src/
  • app_message/
  • app_message/
  • app_message/
• 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주변 변수를 사용하여 별칭을 설정하는 겁니다.

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

내가 뭘 잘못하고 있는 거지?

당신의tsconfig.json가 있어야 한다paths웹 팩 경로 별칭과 일치하는 구성:

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

파일이 JSON이기 때문에 파일에서 조건부 경로 별칭을 할 수 없다.

참조URL: https://stackoverflow.com/questions/54561799/vue-typescript-error-with-webpack-alias-path-not-found