typescript - 带有 webpack 别名的 Vue-typescript 错误,找不到路径
问题描述
我在使用 typescript 的 vue 项目上配置 webpack 别名时遇到问题。如果我使用普通的 javascript,则不会遇到同样的问题,因此我很困惑
该项目分为 2 个,“app_marketplace”,“app_producer”(类似于管理员),我还有一个用于共享组件和实用程序的第三个文件夹。
项目文件夹结构:
- .env.marketplace
- .env.producer
- 上市/
- 源/
- 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
我究竟做错了什么?
解决方案
您tsconfig.json
应该有一个paths
与您的 Webpack 路径别名匹配的配置:
{
"paths": {
"~/*": [
"src/app_shared/*",
],
"@/*": [
"src/*"
]
},
...
}
由于文件是 JSON,您将无法在文件中执行条件路径别名。
推荐阅读
- html - 图像不会并排显示
- javascript - Axios:如何访问被拒绝的承诺的响应对象?
- python - pygame 使精灵向上和向下移动
- node.js - 在将有效负载发送到客户端之前从 requestjs 转换有效负载
- ios - 反应本机iOS构建问题在提供的路径中找不到应用程序包
- c# - 在没有 Parallel.For() 的情况下在 c# 中的 for 循环中实现多线程
- python - 如何在 abaqus python 脚本中引用 findAt 列表/元组
- c# - 打印列表对象 c#
- bash - bash - 下划线后的第一个字符大写
- html - 对齐同一行上的两个按钮有效,但不是 div