定制小程序开发费用昨日我尝试使用vue3 setup + ts + vite进行vue3定制小程序开发费用项目的实现,定制小程序开发费用遇到此问题:
Cannot find module ... or its corresponding type declarations.(ts2307)
文件报错类型以及ts官方错误说明:
这里以别名"@"为例子:
- // .vue文件
- <script setup lang="ts">
- import LoginApi from '@/apis/loginApi'; // (ts2307)
- import { getDate } from '@/utils/date'; // (ts2307)
- </script>
- // .ts文件
- import LoginApi from '@/apis/loginApi'; // (ts2307)
2307 | 错误 | Cannot find module '{0}'. | 找不到模块“{0}”。 |
问题解决方案:
解决方向:开发工具配置 or 项目配置
一、开发工具有关:这里只说使用到的
1、优先查看自己vscode的工作的ts位置及版本
首先,mac: command + shift + P (windows应该也是类似案件cmmand换成Alt或者Ctrl)打开搜索 type 就会显示如下:
然后,让Volar去选择对应的工作位置及版本:
最后,请选择使用工作台版本(这是在寻找问题时候看到尤大大给出的答案)。
切记!!!选择后完全关闭vscode重启!!!
2、可能有人看到Volar:Select TypeScript Version...
这里Volar就是一个vscode插件,对应是为了Vue3的使用。(插件库直接搜索Volar就可以下载)
要编写Vue3所以请下载Volar并关闭Vetur,并注释或删除到你所有的Vetur用户设置:
command + shift + P (windows应该也是类似案件cmmand换成Alt或者Ctrl)打开搜索 setting 就会显示如下:
打开setting.json文件全局搜索“vetur”并删除或注释掉相关设置保存。
切记!!!保存后完全关闭vscode重启!!!
二、项目配置有关:这里构建工具使用vite,但webpack,gulp应该是类似的:
2个配置文件需要相互设置好:
tsconfig.json
- {
- "compilerOptions": {
- // ...
- "baseUrl": "./", // 这里需要配置
- "paths": {
- "@/*": ["./src/*"] // 这里需要配置
- }
- // 如果baseUrl设置为'src',那paths就应该配置为{"@/*": "./*"},如下:
- // "baseUrl": "src",
- // "paths": {
- // "@/*": ["./*"]
- // }
- // 相关baseUrl,paths说明请查看官方文档
- },
- // include也需要配置以下:
- "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
- "exclude": ["node_modules"]
- }
vite.config.ts
- {
- resolve: {
- alias: { // 这里就是需要配置resolve里的别名
- "@": path.join(__dirname, "./src"), // path记得引入
- // 'vue': 'vue/dist/vue.esm-bundler.js' // 定义vue的别名,如果使用其他的插件,可能会用到别名
- },
- },
- }
保存好后,切记!!!保存后完全关闭vscode重启!!!
PS:开发工具和项目配置都需要确认好,构建工具和js框架应该都是类似的问题,设置好就没问题!
希望能帮大家解决问题,如果还有问题可以提出来,大家互相交流交流,一起解决,一起学习!