Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
5 tasks done
furylee opened this issue Jul 31, 2024 · 2 comments

Comments

@furylee
Copy link

furylee commented Jul 31, 2024

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.
@faner11
Copy link

faner11 commented Jul 31, 2024

我也遇到了这个问题

@defghy
Copy link

defghy commented Aug 21, 2024

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
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants