vitepress 部署基于arco-design/web-vue的组件库文档,编译失败问题

问题

在成功加载vitepress以及arco-design后,development下开发正常,编译生产环境打包arco design icon失败。
npm run build 编译报错如下

export { default } from "./arco-vue-icon.js";
^^^^^^
SyntaxError: Unexpected token 'export'

环境

"vitepress": "^1.0.0-alpha.15",
"@arco-design/web-vue": "2.33.0",

复现方法

vitepress的theme文件index.js如下配置

import ArcoVue from '@arco-design/web-vue'
import ArcoVueIcon from '@arco-design/web-vue/es/icon'

export default define({
  ...DefaultTheme,
  enhanceApp: ({ app }) => {
    app.use(ArcoVue)
    app.use(ArcoVueIcon)
    globals.forEach(([name, Comp]) => {
      app.component(name, Comp)
    })
  }
})

尝试思路

思路一:尝试修改引入package.json type:'module';失败
思路二:尝试修改导入文件路径,无效。

解决方法

由于arco-design ssr支持不完善,vite屏蔽掉ssr时的arco组件,通过unplugin-vue-components自动导入arco-design即可。
vite.config.js如下配置

import { defineConfig } from 'vite'
import DefineOptions from 'unplugin-vue-define-options/vite'
import Components from 'unplugin-vue-components/vite'
import { ArcoResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig(async ({ mode }) => {
  return {
    ssr: { noExternal: ['@arco-design/web-vue'] },
    build: {
      chunkSizeWarningLimit: 2000
    },
    plugins: [
      DefineOptions(),
      Components({ resolvers: [ArcoResolver()], deep: true }),
    ]
  }
})

你可能感兴趣的:(前端vite)