改造ant design Vue Pro 1版本,现在使用插件后Form.Item,List.Item 这几个组件无法引入
furylee opened this issue · 2 comments
furylee commented
Describe the bug
注释插件的话是可以使用的,目前就这一个问题了,不知道如何解决
配置如下
import { loadEnv, defineConfig } from 'vite'
import { createHtmlPlugin } from 'vite-plugin-html'
import vue from '@vitejs/plugin-vue2'
import vueJsx from '@vitejs/plugin-vue2-jsx'
import VitePluginVue2Suffix from 'vite-plugin-vue2-suffix'
import path from 'path'
import commonjs from '@rollup/plugin-commonjs'
import postcss from 'esbuild-plugin-postcss'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd())
process.env.NODE_ENV = env.VITE_MODE
return {
// publicDir: "public",
mode: env.VITE_MODE,
base: '/',
plugins: [
// AntdMomentResolver(),
VitePluginVue2Suffix(),
vue(),
vueJsx(),
{
name: 'less-import-fix',
enforce: 'pre',
transform(code, id) {
if (id.endsWith('.less')) {
// 确保 @import 语句中的 @ 符号保持不变
return code.replace(/@import\s+['"]@([^'"]+)['"];/g, (match) => {
return match.replace('@', '@@');
});
}
return code;
},
// 在打包阶段还原 @import 语句
generateBundle(_, bundle) {
for (const file of Object.values(bundle)) {
if (file.type === 'asset' && file.fileName.endsWith('.css')) {
file.source = file.source.replace(/@@/g, '@');
}
}
}
},
Components({
resolvers: [AntDesignVueResolver()],
}),
createHtmlPlugin({
minify: false,
inject: {
data: {
title: 'index',
injectScript: `<script src="https://unpkg.com/viser-vue/umd/viser-vue.min.js"></script>`,
},
tags: [
{
injectTo: 'body-prepend',
tag: 'div',
attrs: {
id: 'tag',
},
},
],
},
}),
commonjs(),
],
css: {
preprocessorOptions: {
less: {
modifyVars: {
// less vars,customize ant design theme
'border-radius-base': '2px',
'theme-color': '#1890FF'
},
javascriptEnabled: true,
},
loaderOptions: {
less: {
lessOptions: {
javascriptEnabled: true,
},
},
},
// scss: { charset: false },
postcss: {
plugins: [
{
postcssPlugin: 'internal:charset-removal',
AtRule: {
charset: (atRule) => {
if (atRule.name === 'charset') {
atRule.remove()
}
},
},
},
],
},
},
},
optimizeDeps: {
esbuild: {
plugins: [
postcss({
// 这里可以配置 PostCSS 选项
plugins: [
// 例如,添加 autoprefixer
require('autoprefixer'),
],
}),
],
},
},
build: {
sourcemap: true,
minify: true,
cssCodeSplit: true,
chunkSizeWarningLimit: 1500,
rollupOptions: {
external: ['viser-vue'],
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString()
}
},
globals: {
'viser-vue': 'viserVue',
},
},
},
},
resolve: {
alias: [
{
find: '~ant-design-vue',
replacement: path.resolve(__dirname, 'node_modules/ant-design-vue'),
},
{
find: '~',
replacement: path.resolve(__dirname, 'node_modules'),
},
{
find: '@',
replacement: path.join(__dirname, './src'),
},
],
extensions: ['.js','.jsx','.vue', '.less']
},
server: {
port: 8031,
host: '0.0.0.0',
open: true,
hmr: true,
proxy: {
'/api': {
target: 'https://xxx.xxx.com/',
ws: false,
changeOrigin: true,
pathRewrite: { '^/api': '' }
}
}
},
}
})```
### Reproduction
http://www.baidu.com
### System Info
```Shell
vue 2.7
Used Package Manager
npm
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.
faner11 commented
我也遇到了这个问题
defghy commented
SelectOption, FormItem。有一些组件ant-design-vue@1.x没有export,是通过Vue.use全局注册使用的
/* istanbul ignore next */
Select.install = function (Vue) {
Vue.use(Base);
Vue.component(Select.name, Select);
Vue.component(Select.Option.name, Select.Option);
Vue.component(Select.OptGroup.name, Select.OptGroup);
};
export default Select;
如上,只有Select
导出了,除非 unplugin-vue-components
支持import后设置components时能够设置取值方法,如下
components: {
ASelectOption: Select.Option,
}
没看到有类似支持。
我的思路是select和form这类不export就不处理了,只处理那些导出的组件