快捷導(dǎo)航

Vue項(xiàng)目分包打包配置(包含dev)完整過程

更新時(shí)間：2023年06月08日 10:52:11 作者：管小姐的斐波那契

最近接到一個(gè)需求,公司需要對(duì)vue項(xiàng)目實(shí)現(xiàn)線上打包,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目分包打包配置(包含dev)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

今天領(lǐng)導(dǎo)要求支援某項(xiàng)目的分包配置，emmm，在參考了公司其他項(xiàng)目的分包操作后，依葫蘆畫瓢，中間也踩了好幾個(gè)坑，簡(jiǎn)單記錄下過程。

一、拉代碼、安裝依賴

哈哈哈，上來就踩坑了，我拉了代碼后，直接哐哐整，然后一堆依賴報(bào)錯(cuò)，我才發(fā)現(xiàn)，同事新增了依賴包，我并不知道，然后就乖乖安裝依賴吧。此處要特別強(qiáng)調(diào)一下，***沒有cross-env 這個(gè)依賴的，記得要安裝一下，沒有cross-env 這個(gè)依賴的，記得要安裝一下，沒有cross-env 這個(gè)依賴的，記得要安裝一下，***重要的事情說三遍，不安的話分包整不了。shell命令貼上了：npm install --save-dev cross-env 安裝成功后 package.json里面會(huì)多"cross-env": “^7.0.3”,配置項(xiàng)，那就對(duì)了.如果實(shí)在不行，要不然你就試試全局安裝吧，npm install -g cross-env，反正全局安裝肯定是可以的，

二、配置環(huán)境變量

這個(gè)也是個(gè)坑坑啊，我要改的項(xiàng)目沒有配置環(huán)境變量，我一開始沒發(fā)現(xiàn)，后來死活不加載不同環(huán)境下對(duì)應(yīng)的路由，才發(fā)現(xiàn)是這的坑。還有打包目錄名字可配可不配，不過建議配置上。

vue.config.js中如下配置

 let projectName = process.env.PROJECT_NAME || "All";  //獲取名稱
module.exports = {
  publicPath: './',
  outputDir: "dist/" + projectName + "/", //打包后的項(xiàng)目目錄名稱，建議這樣修改
  productionSourceMap: false,
  lintOnSave: false,
  devServer: {
     //自己公司項(xiàng)目自己配置哈
  },
  chainWebpack: config => {
    // 設(shè)置環(huán)境變量
    config.plugin("define").tap(args => {
      args[0]["process.env"].PROJECT_NAME = JSON.stringify(
        process.env.PROJECT_NAME
      );
      return args;
    });
  }
}

三、拆路由

把項(xiàng)目中router.js中的要分包的路由分別拆到不同的文件中，例如我圖中就拆了前后9個(gè)，后續(xù)不同的打包命令，就會(huì)加載這九個(gè)文件中的對(duì)應(yīng)的路由。此處有個(gè)疑問，就是能不能拆分子路由的問題，大家可以試試。我是把一個(gè)模塊的父子路由打包帶走的。此處就放兩個(gè)文件路由大家參考一下

//sign.js
export 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.js
export 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主要是判斷不同的環(huán)境下，加載剛才拆的那九個(gè)不同的路由

//config.js
let options={
    "routersName":[],//路由文件名列表
    "menuFlag":"",//顯示的功能列表標(biāo)識(shí)
}
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.js
import Vue from "vue";
import VueRouter from "vue-router";
import store from "@/plugins/vuex/store";
import config from "../../config"   //這個(gè)路徑要以你的項(xiàng)目路徑來哈，自行修改
Vue.use(VueRouter);
let routes=[
  { path: "/", name: "index", redirect: "/login" },
  {
    path: "/login",
    name: "login",
    meta: { cachePage: true },
    component: () => import("@/views/login/login.vue"),
  }
  //要拆包的那些路徑，都要?jiǎng)h了哈，不然分包就分個(gè)寂寞啦?。。。。。。?！
  ]
routes=[...routes,...config.routersName] //路由表合并
console.log(routes,'routerjs中本身的路由')
console.log(config,'config中獲取的路由')
console.log(process.env.PROJECT_NAME,'環(huán)境變量')
const router = new VueRouter({
  // mode: 'hash',
  base: process.env.BASE_URL,
  routes
});
//如果你的項(xiàng)目中有其他的邏輯  再自行添加哈
// ...........其他業(yè)務(wù)邏輯代碼

在合并路由表那塊，我本來想試試子路由單獨(dú)拿出來，父路由還放在router.js中的，但是我感覺往children里面塞，也不夠優(yōu)雅，就索性把 path: "/main"這個(gè)父路由和children里的子路由都拆走了

六、配置package.json

終于到了這一步，臨門一腳了，這一步就是配置shell命令了

為了方便復(fù)制，我把package.json里scripts里面的命令代碼給大家貼出來，其他的配置應(yīng)該不用我貼了吧

//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"
  },

好了，運(yùn)行不同的命令試試吧。我反反復(fù)復(fù)有些莫名的報(bào)錯(cuò)，重裝cross-env也反復(fù)好幾次，全局的，局部都試過。再比如 dev 不行，dev：main就可以，我就刪除了node-modules，重新下載了依賴，就可以了。呼~~~~ 終于搞定了，希望大家能少走一些坑，拜拜~~~