解讀vue分頁(yè)面打包方式

更新時(shí)間：2023年01月14日 08:37:08 作者：風(fēng)雨前行者

這篇文章主要介紹了解讀vue分頁(yè)面打包方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue分頁(yè)面打包

最近了解了一些關(guān)于vue分頁(yè)面打包的方式，因?yàn)榻佑|的可能不是很深入，所以就簡(jiǎn)單記錄一下

第一步

修改vue目錄結(jié)構(gòu)，修改為下圖的方式

大致分為：

1、在src下創(chuàng)建一個(gè)存儲(chǔ)所有頁(yè)面的文件夾，

2、創(chuàng)建每個(gè)獨(dú)立頁(yè)面的文件夾，用來(lái)存儲(chǔ)src下所有的文件（例如：main.js，App.vue、store，router）等等這些文件，放到這個(gè)你創(chuàng)建好的文件夾中（相當(dāng)于小型的vue項(xiàng)目）

3、每個(gè)獨(dú)立頁(yè)面都有一個(gè)這種小型的vue文件夾

第二步

修改配置文件，修改vue.config.js頁(yè)面如下圖：

為了防止頁(yè)面多是發(fā)生混亂，我新建了一個(gè)config文件夾（上圖目錄的config文件夾），用來(lái)修改頁(yè)面配置

這個(gè)pageConfig.js文件配置如下：

const config = {
  pageA: {
    entry: "./src/pages/pageA/main.js",// 入口文件
    template: "public/index.html", // 模板html文件
    filename: "pageA.html" // 修改打包后的html文件名
  },
  pageB: {
    entry: "./src/pages/pageB/main.js",
    template: "public/index.html",
    filename: "pageB.html"
  }
}
 
module.exports = config

然后再vue.config.js文件中配置一下代碼

至于為什么要用三木判斷呢，是因?yàn)樵陧?xiàng)目打包時(shí)，打包獨(dú)立頁(yè)面需要有一層包裹，但是啟動(dòng)項(xiàng)目時(shí)不需要，因?yàn)槲以谶@里判斷了一下（因?yàn)闆]有找到更好的解決方式，所以如果有好方法的小伙伴可以分享一下）

const config = require("./config/pageConfig.js");
const projectName = process.env.PROJECT_NAME;
 
module.exports = {
   pages:projectName ? { index: config[projectName] } : config,  // 打包時(shí)需要自定義文件名 啟動(dòng)不需要
   publicPath: './',
   outputDir: 'dist/' + projectName + '/', //  打包后的文件夾名稱，默認(rèn)dist
   devServer: {
    index: 'pageA.html'//  默認(rèn)啟動(dòng)頁(yè)面
  }
}

第三步

以上步完成后需要配置一下 package.json這個(gè)頁(yè)面，配置如下：

只需要修改一下打包方式即可，啟動(dòng)的話我還是比較喜歡整個(gè)項(xiàng)目都啟動(dòng)起來(lái)（因?yàn)榭吹接泻芏嗳硕际菃为?dú)頁(yè)面啟動(dòng)的，覺得很麻煩）

使用下面的corss-env的話是需要下一個(gè)插件的，可以使用：npm install --save-dev cross-env 方式進(jìn)行下載

代碼中配置的 PROJECT_NAME=pageA 是自定義的，看你給頁(yè)面起的名字是什么就配置什么，獲取這個(gè)的方式就是上圖中 process.env.PROJECT_NAME 方法可以直接獲取到等號(hào)右邊的名字

 "scripts": {
    "build:pageA": "cross-env PROJECT_NAME=pageA vue-cli-service build",
    "build:pageB": "cross-env PROJECT_NAME=pageB vue-cli-service build",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

自此，配置完上面這些東西，你的項(xiàng)目就可以進(jìn)行打包了，打包的方式就是你再pageage.json中配置的打包方式我的方式就是 npm run build:pageA 或者 npm run build:pageB 打包出來(lái)的效果就是兩個(gè)單獨(dú)的頁(yè)面配置

然后還想說(shuō)一下我發(fā)現(xiàn)的兩個(gè)注意事項(xiàng)

第一個(gè)

當(dāng)我們使用UI框架時(shí)，最好使用按需引入的方式（大致可以想象一下，如果有多個(gè)頁(yè)面，每個(gè)頁(yè)面都使用整套的UI框架，會(huì)是什么場(chǎng)景，你的項(xiàng)目我估計(jì)就要炸了）

第二個(gè)

每個(gè)頁(yè)面直接如果想要相互跳轉(zhuǎn)，使用的方式是 window.localhost.href = “頁(yè)面名字”或者 window.open("頁(yè)面名字") 這種方式，這是因?yàn)槊恳豁?xiàng)目都相當(dāng)于小型的vue項(xiàng)目，每個(gè)頁(yè)面都是獨(dú)立的，所以使用路由的方式跳轉(zhuǎn)是跳轉(zhuǎn)不過(guò)去的，不過(guò)我查到有相關(guān)的配置方式好像是可以的，這個(gè)大家就自己去查閱一下吧