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>