autoimport url is not correct

[daoxincc]

It's my auto-imports.d.ts, I dont know why

// Generated by 'unplugin-auto-import'
// We suggest you to commit this file into source control
declare global {
// ....other....
const counterStore: typeof import('/Develop/workspace/小程序平台/mp-fw-ts/src/store/modules/counterStore')['default']
// ....other....
}

package.json

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@vueuse/core": "^8.2.5",
    "amfe-flexible": "^2.2.1",
    "mp-core-sdk": "^0.0.11",
    "normalize.css": "^8.0.1",
    "pinia": "^2.0.13",
    "vant": "^3.4.7",
    "vue": "^3.2.25",
    "vue-router": "^4.0.14"
  },
  "devDependencies": {
    "@types/node": "^17.0.23",
    "@typescript-eslint/eslint-plugin": "^5.1.0",
    "@typescript-eslint/parser": "^5.1.0",
    "@vitejs/plugin-vue": "^2.3.0",
    "@vitejs/plugin-vue-jsx": "^1.3.9",
    "consola": "^2.15.3",
    "eslint": "^7.2.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-typescript": "^0.14.0",
    "eslint-plugin-vue": "^7.20.0",
    "postcss": "^8.4.12",
    "postcss-pxtorem": "^6.0.0",
    "sass": "^1.50.0",
    "typescript": "^4.5.4",
    "unplugin-auto-import": "^0.7.0",
    "unplugin-vue-components": "^0.19.2",
    "vconsole": "^3.14.5",
    "vite": "^2.9.0",
    "vite-auto-import-resolvers": "^2.2.3",
    "vite-plugin-eslint": "^1.4.0",
    "vite-plugin-static-copy": "^0.4.4",
    "vite-plugin-style-import": "^2.0.0",
    "vite-plugin-vconsole": "^1.2.1",
    "vue-eslint-parser": "^7.11.0",
    "vue-tsc": "^0.29.8"
  }
}

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { resolve } from 'path'
import { viteStaticCopy } from 'vite-plugin-static-copy'
import { createStyleImportPlugin, VantResolve } from 'vite-plugin-style-import'
import { viteVConsole } from 'vite-plugin-vconsole'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {
  VantResolver,
  VueUseComponentsResolver,
} from 'unplugin-vue-components/resolvers'
import {
  dirResolver,
  DirResolverHelper,
} from 'vite-auto-import-resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    // 是否开启 https
    https: false,
    // 是否自动在浏览器打开
    open: false,
    // 端口号
    port: 8888,
    host: '0.0.0.0',
    proxy: {
      '/api': {
        // 后台接口
        target: '',
        changeOrigin: true,
        // 如果是https接口，需要配置这个参数
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
  build: {
    outDir: 'dist',
  },
  plugins: [
    vue(),
    vueJsx(),
    createStyleImportPlugin({
      resolves: [VantResolve()],
    }),
    Components({
      dirs: ['src/components'],
      extensions: ['vue', 'tsx'],
      include: [/\.vue$/],
      dts: resolve(__dirname, './src/type/components.d.ts'),
      resolvers: [
        VantResolver(),
        VueUseComponentsResolver(),
      ],
    }),
    // 该辅助插件也是必需的 👇
    DirResolverHelper(),
    AutoImport(
      {
        dts: resolve(__dirname, './src/type/auto-imports.d.ts'),
        imports: [
          'vue',
          'pinia',
        ],
        resolvers: [
          dirResolver({
            target: 'store/modules',
            suffix: 'Store',
          }),
          VantResolver(),
        ],
      },
    ),
    viteVConsole({
      entry: resolve('src/main.ts'), // or you can use entry: [path.resolve('src/main.ts')]
      localEnabled: true,
      enabled: true,
      config: {
        maxLogNumber: 1000,
        theme: 'dark',
      },
    }),
    // copy 文件到dist目录 [1]表示只在build时启用
    viteStaticCopy({
      targets: [
        {
          src: 'src/manifest.json',
          dest: '',
        },
      ],
    })[1],
  ],
  resolve: {
    alias: {
      '@/': `${resolve(__dirname, 'src')}/`,
    },
  },
})

auto-imports.d.ts

// Generated by 'unplugin-auto-import'
// We suggest you to commit this file into source control
declare global {
  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
  const computed: typeof import('vue')['computed']
  const counterStore: typeof import('/Develop/workspace/小程序平台/mp-fw-ts/src/store/modules/counterStore')['default']
  const createApp: typeof import('vue')['createApp']
  const createPinia: typeof import('pinia')['createPinia']
  const customRef: typeof import('vue')['customRef']
  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
  const defineComponent: typeof import('vue')['defineComponent']
  const defineStore: typeof import('pinia')['defineStore']
  const effectScope: typeof import('vue')['effectScope']
  const EffectScope: typeof import('vue')['EffectScope']
  const getActivePinia: typeof import('pinia')['getActivePinia']
  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
  const getCurrentScope: typeof import('vue')['getCurrentScope']
  const h: typeof import('vue')['h']
  const inject: typeof import('vue')['inject']
  const isReadonly: typeof import('vue')['isReadonly']
  const isRef: typeof import('vue')['isRef']
  const mapActions: typeof import('pinia')['mapActions']
  const mapGetters: typeof import('pinia')['mapGetters']
  const mapState: typeof import('pinia')['mapState']
  const mapStores: typeof import('pinia')['mapStores']
  const mapWritableState: typeof import('pinia')['mapWritableState']
  const markRaw: typeof import('vue')['markRaw']
  const nextTick: typeof import('vue')['nextTick']
  const onActivated: typeof import('vue')['onActivated']
  const onBeforeMount: typeof import('vue')['onBeforeMount']
  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
  const onDeactivated: typeof import('vue')['onDeactivated']
  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
  const onMounted: typeof import('vue')['onMounted']
  const onRenderTracked: typeof import('vue')['onRenderTracked']
  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
  const onScopeDispose: typeof import('vue')['onScopeDispose']
  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
  const onUnmounted: typeof import('vue')['onUnmounted']
  const onUpdated: typeof import('vue')['onUpdated']
  const provide: typeof import('vue')['provide']
  const reactive: typeof import('vue')['reactive']
  const readonly: typeof import('vue')['readonly']
  const ref: typeof import('vue')['ref']
  const resolveComponent: typeof import('vue')['resolveComponent']
  const setActivePinia: typeof import('pinia')['setActivePinia']
  const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
  const shallowReactive: typeof import('vue')['shallowReactive']
  const shallowReadonly: typeof import('vue')['shallowReadonly']
  const shallowRef: typeof import('vue')['shallowRef']
  const storeToRefs: typeof import('pinia')['storeToRefs']
  const toRaw: typeof import('vue')['toRaw']
  const toRef: typeof import('vue')['toRef']
  const toRefs: typeof import('vue')['toRefs']
  const triggerRef: typeof import('vue')['triggerRef']
  const unref: typeof import('vue')['unref']
  const useAttrs: typeof import('vue')['useAttrs']
  const useCssModule: typeof import('vue')['useCssModule']
  const useCssVars: typeof import('vue')['useCssVars']
  const useSlots: typeof import('vue')['useSlots']
  const watch: typeof import('vue')['watch']
  const watchEffect: typeof import('vue')['watchEffect']
}
export {}

[markthree]

@daoxincc module path is an absolute path composed of CMD and target path，This is correct

[markthree]

@daoxincc However, please do not let the path appear in Chinese, which may be illegal

[markthree]

@daoxincc Finally, you should ensure that auto imports.d.ts is scanned to ts

[daoxincc]

why it's not a relative path with project dir?

it's my tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "types": ["vite/client"],
    "baseUrl": ".",
    "paths":{
      "@": ["src"],
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom"],
    "allowJs": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }],
  "exclude": ["node_modules", "dist"]
}

[markthree]

@daoxincc Because the absolute path does not need more configuration, you can get friendly prompts，This will be more user-friendly

[daoxincc]

thanks for u comment . but I cant use component tag link in vue template(vscode / webstorm). how can i fix it.

[markthree]

@daoxincc I don't think this is the problem caused by the resolver. Maybe you can go to volar/issues to issue