Skip to content

改造ant design Vue Pro 1版本,现在使用插件后Form.Item,List.Item 这几个组件无法引入 #786

Open

Description

@furylee

Describe the bug

image
注释插件的话是可以使用的,目前就这一个问题了,不知道如何解决

配置如下

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.

Activity

  1. bobfw commented on Jul 31, 2024

    @bobfw

    我也遇到了这个问题

  2. defghy commented on Aug 21, 2024

    @defghy

    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就不处理了,只处理那些导出的组件

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions