vite.config.ts 配置别名报错

Question

环境配置 vue3 + ts
配置如下：（vite.config.ts）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')

function resolve(dir: string) {
  const _path: string = path.resolve(__dirname, dir);
  return _path;
}

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '/@/': resolve('src'),
      // '/@component/': resolve('src/components'),
      '/@components/': path.resolve(__dirname, './src/components')
    }
  },
  plugins: [vue()]
})

报错如下：
html:C:/Users/**/Desktop/vite-project/src/App.vue:4:23: error: Could not resolve "/@components/HelloWorld.vue" (the plugin "vite:dep-scan" didn't set a resolve directory)

4 │ import HelloWorld from '/@components/HelloWorld.vue'

error when starting dev server:
Error: Build failed with 1 error:
html:C:/Users/**/Desktop/vite-project/src/App.vue:4:23: error: Could not resolve "/@components/HelloWorld.vue" (the plugin "vite:dep-scan" didn't set a resolve directory)

at failureErrorWithLog (C:\Users\fw0009626\Desktop\vite-project\node_modules\esbuild\lib\main.js:1443:15)
at C:\Users\fw0009626\Desktop\vite-project\node_modules\esbuild\lib\main.js:1125:28
at runOnEndCallbacks (C:\Users\fw0009626\Desktop\vite-project\node_modules\esbuild\lib\main.js:915:63)
at buildResponseToResult (C:\Users\fw0009626\Desktop\vite-project\node_modules\esbuild\lib\main.js:1123:7)
at C:\Users\fw0009626\Desktop\vite-project\node_modules\esbuild\lib\main.js:1230:14
at C:\Users\fw0009626\Desktop\vite-project\node_modules\esbuild\lib\main.js:606:9
at handleIncomingPacket (C:\Users\fw0009626\Desktop\vite-project\node_modules\esbuild\lib\main.js:703:9)
at Socket.readFromStdout (C:\Users\fw0009626\Desktop\vite-project\node_modules\esbuild\lib\main.js:573:7)
at Socket.emit (events.js:315:20)
at addChunk (internal/streams/readable.js:309:12)      ╵                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~

Answer 1

vite 版本 2.3.3 目前已经解决
vite.config.ts 配置如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')
// import path from 'path'

function _resolve(dir: string) {
  return path.resolve(__dirname, dir);
}

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': _resolve('src'),
      '@assets': _resolve('src/assets'),
      '@comps': _resolve('src/components'),
      '@utils': _resolve('src/utils'),
      '@router': _resolve('src/router'),
      '@store': _resolve('src/store'),
    }
  },
  plugins: [vue()]
})

页面引用如下：

import HelloWorld from '@comps/HelloWorld.vue'
import Workld from '@assets/World.vue';

Answer 2

"devDependencies": {
    "@vitejs/plugin-vue": "^1.9.3",
    "sass": "^1.43.4",
    "sass-loader": "^12.3.0",
    "typescript": "^4.4.3",
    "vite": "^2.6.4",
    "vue-tsc": "^0.3.0"
  }

vite版本2.6.4，ts版本4.4.3，按照下面这种方式配置也可以

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve(__dirname, 'src'),
      },
    ],
  },
  plugins: [vue()],
});

页面引用如下

import Button from '@/packages/components/button/button.vue';