Description
Describe the bug
我使用的 arco-design-pro-vue 生成的项目结构，如下：
-- config
-- vite.config.base.ts
-- vite.config.prod.ts
-- src
...
package.json
tsconfig.json
vite.config.base.ts如下：
import { resolve } from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import svgLoader from 'vite-svg-loader';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ArcoResolver } from 'unplugin-vue-components/resolvers';
import configArcoStyleImportPlugin from './plugin/arcoStyleImport';
export default defineConfig({
plugins: [
vue(),
AutoImport({
dts: true,
include: [
/.[tj]sx?$/, // .ts, .tsx, .js, .jsx
/.vue$/,
/.vue?vue/, // .vue
],
imports: ['vue', 'vue-router', 'pinia'],
resolvers: [ArcoResolver()],
eslintrc: {
enabled: true,
},
}),
Components({
dts: true,
dirs: ['src/components'],
deep: true,
version: 3,
types: [],
resolvers: [
ArcoResolver({
sideEffect: true,
}),
],
}),
vueJsx(),
svgLoader({ svgoConfig: {} }),
configArcoStyleImportPlugin(),
],
resolve: {
alias: [
{
find: '@',
replacement: resolve(__dirname, '../src'),
},
{
find: 'assets',
replacement: resolve(__dirname, '../src/assets'),
},
{
find: 'vue-i18n',
replacement: 'vue-i18n/dist/vue-i18n.cjs.js', // Resolve the i18n warning issue
},
{
find: 'vue',
replacement: 'vue/dist/vue.esm-bundler.js', // compile template
},
],
extensions: ['.ts', '.js', '.vue'],
},
define: {
'VUE_PROD_HYDRATION_MISMATCH_DETAILS': false,
'process.env': {},
},
css: {
preprocessorOptions: {
less: {
modifyVars: {
hack: true; @import (reference) "${resolve( 'src/assets/style/breakpoint.less' )}";,
},
javascriptEnabled: true,
},
},
},
});
vite.config.prod.ts内容如下：
import { mergeConfig } from 'vite';
import baseConfig from './vite.config.base';
import configCompressPlugin from './plugin/compress';
import configVisualizerPlugin from './plugin/visualizer';
import configArcoResolverPlugin from './plugin/arcoResolver';
import configImageminPlugin from './plugin/imagemin';
export default mergeConfig(
{
mode: 'production',
plugins: [
configCompressPlugin('gzip'),
configVisualizerPlugin(),
configArcoResolverPlugin(),
configImageminPlugin(),
],
build: {
rollupOptions: {
output: {
manualChunks: {
arco: ['@arco-design/web-vue'],
chart: ['echarts', 'vue-echarts'],
vue: ['vue', 'vue-router', 'pinia', '@vueuse/core', 'vue-i18n'],
},
},
},
chunkSizeWarningLimit: 2000,
},
},
baseConfig
);
dts: true，会生成出来的component.d.ts如下：
/* eslint-disable */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: vuejs/core#3399
export {}
/* prettier-ignore */
declare module 'vue' {
export interface GlobalComponents {
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
}
}
如果我dis: 'src/components.d.ts'，会生成出两个components.d.ts，一个在src下，一个在根目录
在根目录的，和上面的一样，在src的内容如下：
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: vuejs/core#3399
export {}
/* prettier-ignore */
declare module 'vue' {
export interface GlobalComponents {
AgGridServer: typeof import('./components/ag-grid/AgGridServer.vue')['default']
Block: typeof import('./components/global-setting/block.vue')['default']
Breadcrumb: typeof import('./components/breadcrumb/index.vue')['default']
Chart: typeof import('./components/chart/index.vue')['default']
Footer: typeof import('./components/footer/index.vue')['default']
FormWrapper: typeof import('./components/global-setting/form-wrapper.vue')['default']
GlobalSetting: typeof import('./components/global-setting/index.vue')['default']
List: typeof import('./components/message-box/list.vue')['default']
Menu: typeof import('./components/menu/index.vue')['default']
MessageBox: typeof import('./components/message-box/index.vue')['default']
Navbar: typeof import('./components/navbar/index.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
TabBar: typeof import('./components/tab-bar/index.vue')['default']
TabItem: typeof import('./components/tab-bar/tab-item.vue')['default']
}
}
这是正确的。可是也无法自动加载
ps，在开发环境下不会这样，只在build时发生
这是我的script
"scripts": {
"dev": "vite --config ./config/vite.config.dev.ts",
"build": "vue-tsc --noEmit && vite build --config ./config/vite.config.prod.ts",
"report": "cross-env REPORT=true npm run build",
"preview": "npm run build && vite preview --host",
"type:check": "vue-tsc --noEmit --skipLibCheck",
"lint-staged": "npx lint-staged",
"prepare": "husky install"
},
Reproduction
.............
System Info
开发环境：
System:
OS: macOS 15.2
CPU: (10) arm64 Apple M1 Pro
Memory: 61.94 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
pnpm: 9.14.4 - ~/.nvm/versions/node/v20.11.1/bin/pnpm
Browsers:
Chrome: 131.0.6778.205
Safari: 18.2
服务器环境：
Need to install the following packages:
[email protected]
Ok to proceed? (y)
System:
OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
CPU: (4) x64 Intel(R) Xeon(R) Platinum
Memory: 5.99 GB / 7.10 GB
Container: Yes
Shell: 5.9 - /usr/bin/zsh
Binaries:
Node: 22.12.0 - ~/.nvm/versions/node/v22.12.0/bin/node
npm: 10.9.0 - ~/.nvm/versions/node/v22.12.0/bin/npm
pnpm: 9.15.1 - ~/.nvm/versions/node/v22.12.0/bin/pnpm
以上都有问题Used Package Manager
pnpm
Validations
- Follow our Code of Conduct
- Read the Contributing Guide.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
- The provided reproduction is a minimal reproducible of the bug.