vite一个工程管理多个项目经验

2023-07-31 14:52:19

对于类似于后台管理功能，大多数代码都可重用。因此在一个工程中管理多个项目，能尽可能方便的重用代码。天络实践经验如下：

1.package.json中script部分，利用cross-env设置vite-project

    "dev:datacenter": "cross-env VITE_PROJECT=datacenter vite --port 8080",
                "serve:datacenter": "cross-env VITE_PROJECT=datacenter vite preview",
                "build:datacenter": "cross-env VITE_PROJECT=datacenter vite build",
                "dev:skycms": "cross-env VITE_PROJECT=skycms vite --port 8080",
                "serve:skycms": "cross-env VITE_PROJECT=skycms vite preview",
                "build:skycms": "cross-env VITE_PROJECT=skycms vite build --outDir dist_cms",

2. .env中增加更多配置信息

    VITE_APP_VERSION='1.7.6'
                VITE_APP_COPYRIGHT='test'
                VITE_APP_SIDEICON='test_icon'

3. src下新建Apps目录，并建多个项目目录

src\Apps\datacenter
src\Apps\skycms

4. 每个project下再建相关的项目目录,以skycms为例:

skycms\lang
skycms\resource
skycms\router
skycms\views
skycms\plugin.js

5. main.js中初始化时加载不同的Apps

...
            const project = import.meta.env.VITE_PROJECT || 'skycms'
            ...
            let i18n
            let plugin
            import(`./Apps/${project}/lang/index.js`).then(res=>{
                i18n = res
                return import(`./Apps/${project}/plugin.js`)
            }).then(res=>{
                plugin = res ? res.default : null
                return import(`./Apps/${project}/router/index.js`)
            }).then(router=>{
                permission(router.default)
                const app = createApp(App)
                    .use(router.default)
                    .use(store)
                    .use(i18n.default)
                    .component('Generic', Generic)
            
                if (plugin) {
                    Object.keys(plugin).forEach(key=>
                        app.config.globalProperties[key] = plugin[key]
                    )
                }
                app.mount('#app')
                store.commit('permission/SET_ASYNCROUTES', router.asyncRoutes)

6. 个别特殊位置加载配置

const project = import.meta.env.VITE_PROJECT || 'xxxxx'
            import LogoChinasky from '@/assets/chinasky.svg'
            export default defineComponent({
                setup () {
                },
                mounted () {
                    if (import.meta.env.VITE_APP_SIDEICON) {
                        import(`../Apps/${project}/assets/${import.meta.env.VITE_APP_SIDEICON}.png`).then(url=>{
                            this.logoSrc = url.default
                        })
                    } else {
                        this.logoSrc = LogoChinasky
                    }
            ...

7. vite.config.js, 这里我没办法，只能在Build时，手工切换下。排除掉没其它工程中内容

    build: {
                    rollupOptions: {
                        external: id => /Apps\/datacenter/.test(id),
                        //external: id => /Apps\/skycms/.test(id),
                        output: {
                            manualChunks: {
                                echarts: ['echarts']
                            }
                        }
                    }
                },

8.修改vite.config.js 中title及icon.

export default defineConfig({
                plugins: [
                    vue(),
                    createHtmlPlugin({
                        inject: {
                            data: {
                                title: titles[process.env.VITE_PROJECT] || titles.default,
                                icon: process.env.VITE_PROJECT ? 'favicon.ico' : 'favicon_xxx.ico' 
                            },
                        },
                    }),
                ],

9. 修改index.html

<!DOCTYPE html>
            <html lang="en">
              <head>
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width,initial-scale=1.0">
                <link rel="icon" href="/<%- icon %>">
                <title><%- title %></title>