框架

最開始使用的是vite，但是后面改用了vue-cli4，為什么改用，后續(xù)會說明，使用vue-router4，element-plus，vuex4，axios，vuex-persistedstate（持久化儲存）。

搭建步驟##

• 安裝node，官網(wǎng)直接下載安裝包安裝
• 安裝vue-cli4，npm install -g @vue/cli
• 安裝vue-router4，npm install vue-router@4 --save
• 安裝element-plus，npm install element-plus --save
• 安裝vuex4，npm install vuex@next --save
• 安裝axios，npm install axios --save
• 安裝vuex-persistedstate，npm install vuex-persistedstate --save

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { store } from './store'

//引入配置顏色的css
import './assets/css/configColors.css'
//引入初始化css
import './assets/css/init.css'
//引入修改element的css
import './assets/css/modifyElement.css'

const app = createApp(App).use(router).use(store); // 掛載

import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
app.use(ElementPlus, { size: 'small', zIndex: 5000 });

app.mount('#app')

模式配置

在根目錄新建.env文件，再新建.env.模式名字文件，在package.json里scripts對象中添加快捷方式，假設(shè)：項(xiàng)目中我有個鴻蒙模式，那么我新建.env默認(rèn)模式文件后，再新建一個.env.hongmeng文件，在package.json里scripts對象中添加"build-hongmeng":"vue-cli-service build --mode hongmeng"，當(dāng)我項(xiàng)目中需要打包鴻蒙模式的代碼時我就可以執(zhí)行npm run build-hongmeng，在模式文件中定義好變量，可以在項(xiàng)目當(dāng)中使用變量控制不同模式下加載不同業(yè)務(wù)，變量格式VUE_APP_開頭，例子：VUE_APP_NAME=hongmeng

根據(jù)模式不同加載不同業(yè)務(wù)

模式配置完成后，寥寥幾個變量并不滿足業(yè)務(wù)，我們可以使用require(`./business/${process.env.VUE_APP_NAME}.js`)
新建不同的業(yè)務(wù)文件，使用變量來加載不同的業(yè)務(wù)文件，實(shí)現(xiàn)業(yè)務(wù)分離出去；

問題

• 使用require來加載文件是因?yàn)閕mport 加載文件方式無法實(shí)現(xiàn)，import路徑url無法使用變量替代；
• 最開始的時候使用vite，確實(shí)，速度不是vue-cli腳手架可比的，然而當(dāng)我require文件時，報錯后（恕我無能為力），我就改用了vue-cli
• 我的router使用的是history模式，路由是動態(tài)添加上去的，當(dāng)我使用onBeforeRouteLeave無法觸發(fā)此函數(shù)，但onBeforeRouteUpdate這個卻可以觸發(fā)
• vuex的問題比較嚴(yán)重，使用useStore()方法得到undefined，我測試在其它vue文件使用，也是一樣，還好后來有了解決方案。問題部分代碼：

        import { ref, reactive, getCurrentInstance } from "vue";
    import { ElMessage } from 'element-plus';
    import { useRouter } from 'vue-router';
    import { useStore } from 'vuex';
    export default {
        name: 'login',
        setup(props, context) {
            const store = useStore();
            console.log(store) // ----undefined
            const router = useRouter();
            //引入vue實(shí)例
            const { ctx } = getCurrentInstance();
            const rules = require(`./rules/${process.env.VUE_APP_NAME}.js`);
            const business = require(`./business/${process.env.VUE_APP_NAME}.js`);
                        const businessResult = business.loginBusiness();
            const InitObj = businessResult.resetYzm();
            const yzmRandom = ref(InitObj.yzmRandom);
            const yzmSrc = ref(InitObj.yzmSrc);
            const resetYzm = () => {
                const Obj = businessResult.resetYzm();
                yzmRandom.value = Obj.yzmRandom;
                yzmSrc.value = Obj.yzmSrc;
            };
            const FormRef = ref(null);
                        const Rule = {
                userName: [{
                    validator: rules.checkUserName,
                    trigger: 'blur'
                }],
                password: [{
                    validator: rules.checkPassword,
                    trigger: 'blur'
                }]
            };
            const loginForm = reactive({
                userName: '',
                password: '',
                yzm: ''
            });
                        return {
                loginForm,
                FormRef,
                Rule,
                yzmRandom,
                yzmSrc,
                resetYzm,
            };
                }
        }