Vue3 + Vite 搭建多页面编译项目一种优雅的实现方式简单实用

Vincent.WangWZ

已于 2023-09-02 13:49:27 修改

阅读量368

点赞数

分类专栏： Vue 文章标签： vue js

于 2023-09-02 13:48:41 首次发布

本文链接：https://blog.csdn.net/as75942688/article/details/132637372

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue3 + Vite 搭建多页面编译项目一种优雅的实现方式简单实用

适用场景: 两个前端项目有很多的公共组件, 公共配置, 相当于Vue2中的Page配置项

思路: 通过不同的配置项加载不同的项目入口
缺点: 会强制覆盖 develop和product两个编译mode

<!-- 文件: Root: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 重点: 不同APP的动态名字 取自 .env -->
    <title>%VITE_TITLE%</title>
</head>
<body>
    <div id="app"></div>
    <!-- 重点: 动态的项目入口 -->
    <script type="module" src="/src/%VITE_MAIN_PATH%-main.ts"></script>
</body>
</html>

    ## 文件: Root: .env.mobile
    ## 页面名称
    VITE_TITLE = "移动端"
    ## 项目入口标识
    VITE_MAIN_PATH = "mobile"

    ############################
    ## 文件: Root: .env.pc
    ## 页面名称
    VITE_TITLE = "电脑端"
    ## 项目入口标识
    VITE_MAIN_PATH = "pc"

    // 重点: 干掉 src/main.ts  

    // 文件: Root: src/mobile-main.ts
    import './assets/main.css'
    import { createApp } from 'vue'
    import { createPinia } from 'pinia'
    import App from './App.vue'
    import router from './router'

    console.log("this is mobile")

    const app = createApp(App)
    // 给个运行时Log
    app.use(createPinia())
    app.use(router)
    app.mount('#app')

    /** ***************************************** */

    // 文件: Root: src/pc-main.ts
    import './assets/main.css'
    /** ...类似的... */
    console.log("this is pc")
    /** ...类似的... */

// 文件: Root: package.json
{
    "scripts": {
        "dev": "vite --mode pc",
        "devm": "vite --mode mobile", 
    }
}

// 可选 修改一下build产物目录
// 文件: Root: vite.config.ts
export default defineConfig(({command, mode, ssrBuild}) => {
    return {
        // 输出一个pc端 一个 mobile端
        build: {
            outDir: `project-${mode}`,
        },
    }
});