vue3项目搭建，vue-cli4模式使用，vuex持久化储存

框架

最开始使用的是vite，但是后面改用了vue-cli4，为什么改用，后续会说明，使用vue-router4，element-plus，vuex4，axios，vuex-persistedstate（持久化储存）。

搭建步骤##

安装node，官网直接下载安装包安装
安装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对象中添加快捷方式，假设：项目中我有个鸿蒙模式，那么我新建.env默认模式文件后，再新建一个.env.hongmeng文件，在package.json里scripts对象中添加"build-hongmeng":"vue-cli-service build --mode hongmeng"，当我项目中需要打包鸿蒙模式的代码时我就可以执行npm run build-hongmeng，在模式文件中定义好变量，可以在项目当中使用变量控制不同模式下加载不同业务，变量格式VUE_APP_开头，例子：VUE_APP_NAME=hongmeng

根据模式不同加载不同业务

模式配置完成后，寥寥几个变量并不满足业务，我们可以使用require(`./business/${process.env.VUE_APP_NAME}.js`)
新建不同的业务文件，使用变量来加载不同的业务文件，实现业务分离出去；

问题

使用require来加载文件是因为import 加载文件方式无法实现，import路径url无法使用变量替代；
最开始的时候使用vite，确实，速度不是vue-cli脚手架可比的，然而当我require文件时，报错后（恕我无能为力），我就改用了vue-cli
我的router使用的是history模式，路由是动态添加上去的，当我使用onBeforeRouteLeave无法触发此函数，但onBeforeRouteUpdate这个却可以触发
vuex的问题比较严重，使用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实例
            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,
            };
                }
        }

最后编辑于：2021.06.10 10:48:47