一、前提
我们使用的是require.context方法导入,在vite创建的项目内使用会报错"require not found",所以必须用webpack创建项目。或者有大能可以说说vite怎么解决这个问题。
2021年5月17日,经过几天的尝试,vite2创建的项目可以实现自动导入啦。
二、webpack项目导入
// src/store/index.ts
import { createStore } from 'vuex'
import {StateType} from "./leixing"; // 万恶的ts需要的接口,不是vuex的子模块
import VuexPersistence from 'vuex-persist' // 自动保存vuex数据,刷新时不丢失数据的模块
// 自动注入所有 ./store 下的 vuex 子模块,其中leixing.ts和index.ts不需要注入,
const files = require.context('@/store', false, /^(?!.*(?:(index|leixing).ts$)).*\.ts$/)
const modules: StateType = {}
files.keys().forEach((key) => {
modules[key.replace(/(\.\/|\.ts)/g, '')] = files(key).default
})
const store = createStore({
state: {
},
mutations: {
},
actions: {
},
modules: modules,
plugins: [new VuexPersistence().plugin], // 刷新不丢失数据的配置
})
console.log(modules,"查看vuex里面都有什么")
export default store
三、vite2项目导入
import { createStore } from 'vuex'
import {StateType} from "./leixing"; // 万恶的ts需要的接口,不是vuex的子模块
import VuexPersistence from 'vuex-persist' // 自动保存vuex数据,刷新时不丢失数据的模块
// 自动保存vuex数据
const baocunshuju = new VuexPersistence({
storage: window.sessionStorage
})
// vite版自动导入vuex
// 这次我将需要导入的文件放到store/modules文件夹下面了
// import.meta.globEager的参数必须是绝对路径或者相对路径,不能是路径别名。也就是以点和斜杠开头的字符串。
let modules = {}
const modulesFiles = import.meta.globEager('./modules/*.ts')
// console.log(modulesFiles,"过滤出多少个")
for (const path in modulesFiles) {
const moduleName = path.replace(/(.*\/)*([^.]+).*/gi, '$2')
// console.log(moduleName,"模块名字")
// modules = { ...modules, ...modulesFiles[path] }
modules = {...modules,[moduleName]:modulesFiles[path].default}
}
// console.log(modules,"结果")
const store = createStore({
state: {
},
mutations: {
},
actions: {
},
modules: modules,
plugins: [baocunshuju.plugin],
})
console.log(modules,"vuex")
export default store