技術標籤：vue打包vue.js

最近了解了一些關於vue分頁面打包的方式，因為接觸的可能不是很深入，所以就簡單記錄一下

首先第一步，修改vue目錄結構，修改為下圖的方式

大致分為：

1、在src下建立一個儲存所有頁面的資料夾，

2、建立每個獨立頁面的資料夾，用來儲存src下所有的檔案（例如：main.js，App.vue、store，router）等等這些檔案，放到這個你建立好的資料夾中（相當於小型的vue專案）

3、每個獨立頁面都有一個這種小型的vue資料夾

第二步：修改配置檔案，修改vue.config.js頁面如下圖：

為了防止頁面多是發生混亂，我新建了一個config資料夾（上圖目錄的config資料夾），用來修改頁面配置

這個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檔案中配置一下程式碼

至於為什麼要用三木判斷呢，是因為在專案打包時，打包獨立頁面需要有一層包裹，但是啟動專案時不需要，因為我在這裡判斷了一下（因為沒有找到更好的解決方式，所以如果有好方法的小夥伴可以分享一下）

const config = require("./config/pageConfig.js");
const projectName = process.env.PROJECT_NAME;

module.exports = {
   pages:projectName ? { index: config[projectName] } : config,  // 打包時需要自定義檔名 啟動不需要
   publicPath: './',
   outputDir: 'dist/' + projectName + '/', //  打包後的資料夾名稱，預設dist
   devServer: {
    index: 'pageA.html'//  預設啟動頁面
  }
}
 

第三步：以上步完成後需要配置一下 package.json這個頁面，配置如下：

只需要修改一下打包方式即可，啟動的話我還是比較喜歡整個專案都啟動起來（因為看到有很多人都是單獨頁面啟動的，覺得很麻煩）

使用下面的corss-env的話是需要下一個外掛的，可以使用：npm install --save-dev cross-env 方式進行下載

程式碼中配置的 PROJECT_NAME=pageA 是自定義的，看你給頁面起的名字是什麼就配置什麼，獲取這個的方式就是上圖中 process.env.PROJECT_NAME 方法可以直接獲取到等號右邊的名字

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

自此，配置完上面這些東西，你的專案就可以進行打包了，打包的方式就是你再pageage.json中配置的打包方式 我的方式就是 npm run build:pageA 或者npm run build:pageB 打包出來的效果就是兩個單獨的頁面配置

然後還想說一下我發現的兩個注意事項：

第一個：當我們使用UI框架時，最好使用按需引入的方式（大致可以想象一下，如果有多個頁面，每個頁面都使用整套的UI框架，會是什麼場景，你的專案我估計就要炸了）

第二個： 每個頁面直接如果想要相互跳轉，使用的方式是 window.localhost.href = “頁面名字”或者 window.open("頁面名字") 這種方式，這是因為每一專案都相當於小型的vue專案，每個頁面都是獨立的，所以使用路由的方式跳轉是跳轉不過去的，不過我查到有相關的配置方式好像是可以的，這個大家就自己去查閱一下吧

好了目前知道的也就這麼多，如果有哪裡說的不對，歡迎大家給我指正，如果還不錯點個贊可好，嘿嘿