问题
在胜利加载 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<Theme>({
...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 }),
]
}
})