位置: IT常识 - 正文

Vue项目分包打包配置(包含dev)全过程(vuecli打包项目)

编辑:rootadmin
Vue项目分包打包配置(包含dev)全过程

推荐整理分享Vue项目分包打包配置(包含dev)全过程(vuecli打包项目),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue工程打包部署,vue项目打包dist,vue 分模块打包,vue3项目打包,vue 项目打包,vue3项目打包,vue 项目打包,vue项目打包dist,内容如对您有帮助,希望把文章链接给更多的朋友!

今天领导要求支援某项目的分包配置,emmm,在参考了公司其他项目的分包操作后,依葫芦画瓢,中间也踩了好几个坑,简单记录下过程。

一、拉代码、安装依赖

哈哈哈,上来就踩坑了,我拉了代码后,直接哐哐整,然后一堆依赖报错,我才发现,同事新增了依赖包,我并不知道,然后就乖乖安装依赖吧。此处要特别强调一下,***没有cross-env 这个依赖的,记得要安装一下,没有cross-env 这个依赖的,记得要安装一下,没有cross-env 这个依赖的,记得要安装一下,***重要的事情说三遍,不安的话分包整不了。shell命令贴上了:npm install --save-dev cross-env 安装成功后 package.json里面会多"cross-env": “^7.0.3”,配置项,那就对了.如果实在不行,要不然你就试试全局安装吧,npm install -g cross-env,反正全局安装肯定是可以的,

二、配置环境变量Vue项目分包打包配置(包含dev)全过程(vuecli打包项目)

这个也是个坑坑啊,我要改的项目没有配置环境变量,我一开始没发现,后来死活不加载不同环境下对应的路由,才发现是这的坑。还有打包目录名字可配可不配,不过建议配置上。

vue.config.js中如下配置

let projectName = process.env.PROJECT_NAME || "All"; //获取名称module.exports = { publicPath: './', outputDir: "dist/" + projectName + "/", //打包后的项目目录名称,建议这样修改 productionSourceMap: false, lintOnSave: false, devServer: { //自己公司项目自己配置哈 }, chainWebpack: config => { // 设置环境变量 config.plugin("define").tap(args => { args[0]["process.env"].PROJECT_NAME = JSON.stringify( process.env.PROJECT_NAME ); return args; }); }}三、拆路由

把项目中router.js中的要分包的路由分别拆到不同的文件中,例如我图中就拆了前后9个,后续不同的打包命令,就会加载这九个文件中的对应的路由。此处有个疑问,就是能不能拆分子路由的问题,大家可以试试。我是把一个模块的父子路由打包带走的。此处就放两个文件路由大家参考一下

//sign.jsexport default[ { path: "/main", name: "main", meta: { cachePage: true }, component: () => import("@/views/main/main.vue"), children: [ { path: "/other", name: "other", component: () => import("@/views/login/other"), }, /* 贷款签约 */ { path: "/loanSigning", name: "loanSigning", meta: { cachePage: true, showMain: true }, component: () => import("@/views/loanSigning/index"), }, { path: "/loanSigningEdit", name: "loanSigningEdit", meta: { showBack: true }, component: () => import("@/views/loanSigning/loanSigningEdit"), }, { path: "/loanSigningRead", name: "loanSigningRead", meta: { showBack: true }, component: () => import("@/views/loanSigning/loanSigningRead"), }, ] }]```javascript```javascript//track.jsexport default[ { path: "/main", name: "main", meta: { cachePage: true }, component: () => import("@/views/main/main.vue"), children: [ { path: "/other", name: "other", component: () => import("@/views/login/other"), }, /* 轨迹视图 */ { path: "/trackView", name: "mobileMarketing", meta: { cachePage: true, showMain: true }, component: () => import("@/views/trackView/index"), }, { path: "/trackViewAdd", name: "trackViewAdd", meta: { showBack: true }, component: () => import("@/views/trackView/trackViewAdd"), }, ] }]四、配置config.js文件

config.js主要是判断不同的环境下,加载刚才拆的那九个不同的路由

//config.jslet options={ "routersName":[],//路由文件名列表 "menuFlag":"",//显示的功能列表标识}if(process.env.PROJECT_NAME=='All'){ options.menuFlag="All" options.routersName=[ ...require("@/plugins/vueRouter/all.js").default ]}else if(process.env.PROJECT_NAME=='potential'){ options.menuFlag="potential" options.routersName=[ ...require("@/plugins/vueRouter/potential.js").default, ] }else if(process.env.PROJECT_NAME=='mobile'){ options.menuFlag="mobile" options.routersName=[ ...require("@/plugins/vueRouter/mobile.js").default, ] }else if(process.env.PROJECT_NAME == 'credit'){ options.menuFlag="credit" options.routersName=[ ...require("@/plugins/vueRouter/credit.js").default, ] }else if(process.env.PROJECT_NAME == 'loan'){ options.menuFlag="loan" options.routersName=[ ...require("@/plugins/vueRouter/loan.js").default, ] }else if(process.env.PROJECT_NAME == 'sign'){ options.menuFlag="sign" options.routersName=[ ...require("@/plugins/vueRouter/sign.js").default, ] }else if(process.env.PROJECT_NAME == 'track'){ options.menuFlag="track" options.routersName=[ ...require("@/plugins/vueRouter/track.js").default, ] }else if(process.env.PROJECT_NAME == 'approval'){ options.menuFlag="approval" options.routersName=[ ...require("@/plugins/vueRouter/approval.js").default, ] }else if(process.env.PROJECT_NAME == 'main'){ options.menuFlag="main" options.routersName=[ ...require("@/plugins/vueRouter/main.js").default, ] }export default options五、修改router.js//router.jsimport Vue from "vue";import VueRouter from "vue-router";import store from "@/plugins/vuex/store";import config from "../../config" //这个路径要以你的项目路径来哈,自行修改Vue.use(VueRouter);let routes=[ { path: "/", name: "index", redirect: "/login" }, { path: "/login", name: "login", meta: { cachePage: true }, component: () => import("@/views/login/login.vue"), } //要拆包的那些路径,都要删了哈,不然分包就分个寂寞啦!!!!!!!! ]routes=[...routes,...config.routersName] //路由表合并console.log(routes,'routerjs中本身的路由')console.log(config,'config中获取的路由')console.log(process.env.PROJECT_NAME,'环境变量')const router = new VueRouter({ // mode: 'hash', base: process.env.BASE_URL, routes});//如果你的项目中有其他的逻辑 再自行添加哈// ...........其他业务逻辑代码

在合并路由表那块 ,我本来想试试子路由单独拿出来,父路由还放在router.js中的,但是我感觉往children里面塞,也不够优雅,就索性把 path: "/main"这个父路由和children里的子路由都拆走了

六、配置package.json

终于到了这一步,临门一脚了,这一步就是配置shell命令了 为了方便复制,我把package.json里scripts里面的命令代码给大家贴出来,其他的配置应该不用我贴了吧

//package.json中的命令 "scripts": { "dev": "set NODE_OPTIONS=--openssl-legacy-provider && cross-env PROJECT_NAME=All vue-cli-service serve", "dev:main": "cross-env PROJECT_NAME=main vue-cli-service serve", "dev:potential": "cross-env PROJECT_NAME=potential vue-cli-service serve", "dev:mobile": "cross-env PROJECT_NAME=mobile vue-cli-service serve", "dev:credit": "cross-env PROJECT_NAME=credit vue-cli-service serve", "dev:loan": "cross-env PROJECT_NAME=loan vue-cli-service serve", "dev:sign": "cross-env PROJECT_NAME=sign vue-cli-service serve", "dev:track": "cross-env PROJECT_NAME=track vue-cli-service serve", "dev:approval": "cross-env PROJECT_NAME=approval vue-cli-service serve", "build": "cross-env PROJECT_NAME=All vue-cli-service build", "build:potential": "cross-env PROJECT_NAME=potential vue-cli-service build", "build:main": "cross-env PROJECT_NAME=main vue-cli-service build", "build:mobile": "cross-env PROJECT_NAME=mobile vue-cli-service build", "build:credit": "cross-env PROJECT_NAME=credit vue-cli-service build", "build:loan": "cross-env PROJECT_NAME=loan vue-cli-service build", "build:sign": "cross-env PROJECT_NAME=sign vue-cli-service build", "build:track": "cross-env PROJECT_NAME=track vue-cli-service build", "build:approval": "cross-env PROJECT_NAME=approval vue-cli-service build", "lint": "vue-cli-service lint" },

好了,运行不同的命令试试吧。我反反复复有些莫名的报错,重装cross-env也反复好几次,全局的,局部都试过。再比如 dev 不行,dev:main就可以,我就删除了node-modules,重新下载了依赖,就可以了。 呼~~~~ 终于搞定了,希望大家能少走一些坑,拜拜~~~

本文链接地址:https://www.jiuchutong.com/zhishi/295234.html 转载请保留说明!

上一篇:如何配置openai的返回Stream数据并转发到h5页面按markdown格式流式输出(怎么配置opencv)

下一篇:Vue学习:路由(vue路由实现)

  • 价外税怎么理解
  • 文化服务费内容是什么
  • 代开发票含税价怎么核算为不含税发票
  • 全年没有超过起征点需要汇算吗
  • 企业所得税固定资产
  • 资产负债表利润表和现金流量表之间的关系
  • 专票多少钱
  • 现金流量怎么影响股票价值
  • 小企业准则汇兑损失计入什么科目
  • 权益法下股权投资
  • 固定报销额度算工资吗
  • 外购商品用于促销能抵扣吗
  • 购买职工宿舍用品账务处理
  • 待摊费用按照入账金额还是合同金额摊销?
  • 开具增值税发票销货清单的最新规定是什么
  • 开发票税收分类编码怎么选
  • 水费分割单由哪一方出具
  • 印花税的基数及标准是多少?
  • 2019年煤炭
  • 每个季度企业要缴纳什么税
  • 危险废物处理原则
  • 分期付款购入原材料怎么做账
  • 一年期电子银行承兑汇票
  • 返还的个税手续费奖励给个人需要缴纳个税吗
  • 股东的房产无偿提供给公司用
  • 新会计准则规定资产如何入账
  • 员工高温补贴奖励怎么写
  • 用友t3新账套总账设置
  • 无线网连上却上不了网络
  • linux监控系统命令
  • 未实缴出资的股权转让后还要承担法律后果吗
  • windows11自带录屏怎么使用
  • 行政单位职工福利费使用范围
  • 审计项目种类
  • 企业投资固定资产
  • html列表去掉点
  • 什么叫相机标定
  • ps怎么参考线快捷键
  • 出口免抵退税的会计分录
  • 固定资产减值损失属于营业外支出吗
  • 子公司吸收合并母公司 特殊性税务处理
  • 个税的本期收入是什么意思
  • 其他应付款包括的内容
  • 小程序渲染是什么意思
  • mysql数据库如何回滚
  • 残保金相关内容有哪些
  • 个体户开票超过多少认定为小规模
  • 固定资产备抵科目有哪些
  • 异地施工怎么交税
  • 小规模纳税人销售自己使用过的物品
  • 赠品视同销售会计分录如何编制?
  • 暂估入库成本的会计分录
  • 转出未交增值税最终怎么转平
  • 主营业务成本账户属于什么账户
  • 单位起诉员工赔偿算劳动争议
  • 开发阶段的支出计入什么科目
  • 集团固定资产管理
  • 购入土地使用权以什么为计税依据
  • 收回投标保证金 建立台账
  • 研发投入算到产值里吗
  • 提高sql执行效率的方法
  • win7系统怎么设置开机启动项
  • 怎么删除文件的隐藏属性
  • solaris 11.4
  • linux chmod命令用法
  • explorer.exe进程文件
  • 如何快速卸载游戏
  • win10一年更新几次
  • javascript中的3种继承实现方法
  • 狗刨好学吗
  • node.js中的http.response.removeHeader方法使用说明
  • unity移动ui
  • 浅谈python
  • 纳税申报模拟
  • 夫妻双方房子契税怎么算
  • 乌市社保缴费一个月多少钱
  • 本期预缴税额怎么填
  • 个人所得税自行纳税申报表a表填写模板
  • 广西定额发票查询入口官网
  • 2023年企业所得税计算公式表
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设