vue项目中使用workspaces vue和yarnworkspaces结合搭建vue项目背景在一个项目中，一般分用户端和管理端，又细分PC、H5，各个端很多东西是公用的，比如配置文件，依赖库，工具库，而我们一般的做法就是搭建很多个项目，配置就拷贝，但这样很容易数据出错，拷贝漏掉了一些，还有就是把一些公用的组件封装好，通过npm发布，但是这样还麻烦，在开发环境中会出现频繁更新，每次更新都要发布版本，还有到各个项目中升级版本使用yarnworkspacesyarnworkspaces就是使用工作空间，专业的术语就叫**monorepo(monolithicrepository)**就是一种项目管理方式，可以使用yarnlernapnpm来实现，我们公司目前使用的是yarn，目前很多项目都是使用这种项目管理方式，像vue、react，babel这些的源码都是使用这种方式来管理的reacthttps://github1s.com/facebook/react创建工作空间要创建一个工作空间，我们只需在package.json里面添"private":true,"workspaces":["packages/*"],要private为true时workspace才会被启用，workspaces属性的值为一个字符串数组，每一项指代一个workspace路径，支持全局匹配，这里的路径指向指的是package.json所在文件夹文件夹名。我们工作空间的目录就是下面这个样子了|--node_modules|--packages|--workspace-home#工作空间workspace-home|--src|--package.json#独有的依赖，我们就可以单独安装在这个里面|--workspace-admin|--src#我们这里可以引用share模块的，由于定义的名字叫@project/share，我们引入的时候就像这样import{xxxx}from'@project/share'|--package.json|--share|--package.json#在package.json里面要定义name属性，比如这个叫@project/share|--package.json#公用的依赖，我们就可以安装在这个里面注意，工作空间中（packages）package.json我们要添加name属性，这就是工作空间的名字，而不是文件夹名大概了解了这些知识，我们就可以在vue项目中使用这种方式，用户PC端的放在一个工作空间中，后端管理PC端放在另一个工作空间中，我们就可以把公用的配置文件，组件，工具库放到一个工作空间中，在另个两个工作空间中引用工作空间命令#能够共享的包就安装到根#工作空间独立的就单独安装到工作区#添加到根yarnaddcross-env-D-W#删除根yarnremovecross-env-W#如果想单独添加或者移除某个子项目的依赖，可以使用如下命令：yarnworkspace
add--devyarnworkspaceremove#注意：workspace_nameworkspace_name包名，package.json中设置的name，不是文件夹名#比如yarnworkspace@project/homeaddswiperyarnworkspace@project/adminaddswiperyarnworkspace@project/homeaddreact-custom-scrollbars在vue项目中搭建比如现在我们要搭建一个项目，总共有两个端，管理端和用户端，项目名叫vue-workspace创建项目使用vuecreatevue-workspace创建一个项目，选择项目配置，搭建好的项目大致如下改造项目新建一个packages的目录，这个目录下方新建三个文件夹admin,home,share把项目根目录的src、public,babel.config.js,分别拷贝到packages/amin和packages/home文件下，分别在两个文件夹中创建package.json目录结构/vue-workspace|--packages|--admin后台：管理端|--public|--src|--babel.config.js|--package.json|--home门户：用户端|--public|--src|--babel.config.js|--package.json|--share放公用的代码|--index.js|--package.json|--package.json把根目录的@vue/cli-service依赖和scripts拷贝过来，定义工作空间的名字为什么要拷贝@vue/cli-service，这样我们就能直接在packages/admin文件夹下执行npmrundev这些命令，而不会出现vue-cli-service不存在的报错amin/package.json注意我多添加了一个dev的命令，习惯npmrundev运行{"name":"@project/admin","version":"0.1.0","scripts":{"serve":"vue-cli-serviceserve","dev":"vue-cli-serviceserve","build":"vue-cli-servicebuild","lint":"vue-cli-servicelint"},"devDependencies":{"@vue/cli-service":"~4.5.0"}}home/package.json注意我多添加了一个dev的命令，习惯npmrundev运行{"name":"@project/home","version":"0.1.0","scripts":{"serve":"vue-cli-serviceserve","dev":"vue-cli-serviceserve","build":"vue-cli-servicebuild","lint":"vue-cli-servicelint"},"devDependencies":{"@vue/cli-service":"~4.5.0"}}share/package.json{"name":"@project/share","version":"0.1.0","main":"index.js","scripts":{"build":"echo没有打包","lint":"vue-cli-servicelint"},"devDependencies":{"@vue/cli-service":"~4.5.0"}}修改项目根目录下的package.json，添加workspaces，修改scripts"private":true,"workspaces":["packages/*"],"scripts":{"lint":"yarnworkspacesrunlint","build":"yarnworkspacesrunbuild","dev:admin":"yarn--cwdpackages/admindev","build:admin":"yarn--cwdpackages/adminbuild","dev:home":"yarn--cwdpackages/homedev","build:home":"yarn--cwdpackages/homebuild"},yarn--cwd可以指定工作目录yarn--cwdpackages/admindev就是相当于在packages/admin目录下执行npmrundev到这一步，我们在根目录下执行安装依赖，这样工作空间@project/admin和@project/home的依赖能安装上yarninstall这样yarndev:admin就运行管理端，yarndev:home运行用户端大致目录结构如下，这样在管理端admin中，就可以通过，就能很方便的修改了//引入公用样式import"@project/share/styles/index.scss"//引入组件、工具库等import{formatDate}from"@project/share"项目链接https://github.com/zf1832729975/vue-workspace问
题
快递公司问题件快递公司问题件货款处理关于圆的周长面积重点题型关于解方程组的题及答案关于南海问题
如遇到公用的share没有解析正确，或者需要自己解析时，要配置vue.config.js//vue.config.jsconstpath=require("path")functionresolve(dir){returnpath.join(__dirname,dir)}/***@type{import('@vue/cli-service').ProjectOptions}*/module.exports={publicPath:process.env.NODE_ENV==="development"?"/":"./",//部署应用包时的基本URLassetsDir:"static",devServer:{},chainWebpack:(config)=>{//解析share--如遇到share不能被解析时可以用//config.module.rule("js").include.add(resolve("../share")).add(resolve("src"))//config.module.rule("vue").include.add(resolve("../share")).add(resolve("src"))},}请求封装分享importaxiosfrom"axios"import{Message,Loading}from"element-ui"import{getToken,blobSaveFile}from"@/utils"importstorefrom"@/store"importrouterfrom"@/router"importqsfrom"qs"//创建axios实例//@ts-ignoreconstservice=axios.create({withCredentials:true,//baseURL:"/api-backstand",headers:{"Content-Type":"application/x-www-form-urlencoded;charset=utf-8",},timeout:30000,//请求超时时间})service.interceptors.request.use((config)=>{consttoken=getToken()if(token){config.headers.Authorization="Bearer"+token}returnconfig},(error)=>Promise.reject(error))service.interceptors.response.use(functionresponseHandler(response){constremote=response.data//文件下载if(response.config.responseType==="blob"){if(response.data.type==="application/json"){constfileReader=newFileReader()fileReader.readAsText(response.data)returnnewPromise((resolve,reject)=>{fileReader.onload=function(){constresData=JSON.parse(this.result)Message.error("下载失败:"+resData.msg)returnreject(resData)}})}//获取文件名、如果生产环境获取不到，要让后端设置Access-Control-Expose-Headershttps://www.jianshu.com/p/84d2f8b32842constdisposition=response.headers["content-disposition"]if(disposition)response.fileName=decodeURIComponent(disposition.slice("attachment;filename=".length))returnresponse}///api-backstand的要判断code是否为0if(response.config.url.includes("/api-backstand")&&remote.code!=0){returnerrorHandler({response})}returnremote},errorHandler)exportfunctionerrorHandler(error){letmsgif(error.response){if(!(msg=error.response.data.msg)){switch(error.response.status){case400:msg="请求错误(400)"breakcase401:msg="未授权，请重新登录(401)"breakcase403:msg="拒绝访问(403)"breakcase404:msg="请求路径未找到(404)"breakcase408:msg="请求超时(408)"breakcase500:msg="服务器错误(500)"breakcase501:msg="服务未实现(501)"breakcase502:msg="网关错误(502)"breakcase503:msg="服务不可用(503)"breakcase504:msg="网络超时(504)"breakcase505:msg="HTTP版本不受支持(505)"breakdefault:msg=`连接出错(${error.response.status})！`}}if(error.response.status===401){store.commit("CLEAR_USER_INFO")router.push("/login")}}else{msg="请求无响应"}Message.error(msg)error.message=msgreturnPromise.reject(error)}consthttp={request(axiosConfig){returnservice(axiosConfig)},get(url,params,config){returnservice({...config,url,method:"GET",params,paramsSerializer:(params)=>{returnqs.stringify(params,{indices:false})},})},/**postapplication/x-www-form-urlencoded*/post(url,data,config){returnservice({url,data,method:"POST",...config,transformRequest:[(data)=>{returnqs.stringify(data,{indices:false})},],})},/**postapplication/json*/postJson(url,data,config){returnservice({method:"POST",url:url,data:data,...config,headers:{"Content-Type":"application/json;charset=UTF-8",},})},/**postmultipart/form-data*/postForm(url,data){returnservice({method:"POST",url,data,headers:{"Content-Type":"multipart/form-data",},})},/**下载文件responseType:"blob"*/downloadFile(config){//@ts-ignorereturnservice({//1stimeout:60*1000,...config,responseType:"blob",})},/**下载文件并保存*/downloadFileSava(config,defaultFileName){constloadingInstance=Loading.service({fullscreen:true,text:"下载中",background:"rgba(0,0,0,0.08)",})returnhttp.downloadFile(config).then((res)=>{loadingInstance.close()const{data}=resconstfileName=res.fileName||defaultFileName||""blobSaveFile(data,fileName)returnres},(err)=>{loadingInstance.close()returnerr})},}exportdefaulthttp完整代码：https://github.com/zf1832729975/vue-workspace -全文完-
浙公网安备 33021202002483