Question

我正在开发一个 VueJS 项目，该项目根据环境变量使用不同的颜色和其他一些东西。这些值包含在我作为子模块添加的另一个存储库中。所以我项目中的结构是：

我的项目
- 子模块
- node_modules
- 公开
- 源代码

为了完成这项工作，我将其包含在 vue.config.js 中：

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set('@theme', path.resolve('the-submodule/' + process.env.VUE_APP_THEME))
  },
...

我像这样使用它，例如在 plugins/vuetify.ts 中：

import Vue from 'vue'
import Vuetify from 'vuetify/lib/framework'
import colors from '@theme/colors'

Vue.use(Vuetify)

export default new Vuetify({
  theme: {
    themes: {
      light: {
        ...colors
      }
    }
  }
})

或在 router/index.ts 中：

import texts from '@theme/texts'

...

router.afterEach((to) => {
  Vue.nextTick(() => {
    document.title = to.meta.title ? `${texts.appName} | ${to.meta.title}` : texts.appName
  })
})

虽然这确实可以编译并且可以工作，但我在编译过程中仍然遇到错误：

ERROR in /Users/sme/projects/aedifion-frontend/src/plugins/vuetify.ts(4,20):
4:20 Cannot find module '@theme/colors' or its corresponding type declarations.
    2 | import Vue from 'vue'
    3 | import Vuetify from 'vuetify/lib/framework'
  > 4 | import colors from '@theme/colors'
      |                    ^
    5 | 
    6 | Vue.use(Vuetify)
    7 | 
ERROR in /Users/sme/projects/aedifion-frontend/src/router/index.ts(12,19):
12:19 Cannot find module '@theme/texts' or its corresponding type declarations.
  > 12 | import texts from '@theme/texts'
       |                   ^

这些是主题中的文件示例：

the-submodule/some-theme/colors.ts：

import { Colors } from '../types'

export default {
  accent: '#288946',
  error: '#e60046',
  info: '#969196',
  primary: '#007982',
  secondary: '#96BE0D',
  success: '#a0af69',
  warning: '#fab450'
} as Colors

the-submodule/some-theme/texts.ts：

import { Texts } from '../types'

export default {
  appName: 'MyApp'
} as Texts

the-submodule/types.ts：

export interface Colors {
  accent: string;
  error: string;
  info: string;
  primary: string;
  secondary: string;
  success: string;
  warning: string;
}

export interface Texts {
  appName: string;
}

我还在 .d.ts 中创建了不同版本的 the-submodule 文件，既针对每种类型，也针对所有基因类型。

我已经尝试了几乎所有我能找到的东西。我如何摆脱这些错误？

编辑：

当我显式映射 tsconfig.json 中的路径时它有效：

{
  "compilerOptions": {
    "paths": {
      "@/*": [
        "src/*"
      ],
      "@theme/*": [
        "the-submodule/some-theme/*"
      ]
    },

所以我想问题是：如何在不显式将 tsconfig-json 添加到路径的情况下使 some-theme 中的路径映射起作用？

如何在打字稿项目中使用带有打字稿代码的 git 子模块

0 个答案: