快捷導航

vue單頁面改造多頁面應用詳解

更新時間：2022年06月26日 10:03:57 作者：web老猴子

本文主要介紹了vue單頁面改造多頁面應用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

= { entry: `src/pages/${page}/main.js`, // page 的入口 template: `public/index.html`, // 模板來源 filename: `${page}.html`, // 在 dist/index.html 的輸出 } } const page = process.argv[3] || 'index' // 如果是開發(fā)環(huán)境，運行階段 if (!isProduction) { for (const page of buildEntries) { initPageParams(page) } } else { // 只有在生產(chǎn)打包的時候，單獨打包，拆成不用的文件夾 initPageParams(page) } module.exports = { publicPath: './', outputDir: 'dist', assetsDir: isProduction ? page : 'static', productionSourceMap: false, pages: modules, devServer: { port: 8080 }, lintOnSave: false }

這時候我們npm run build:index 嘗試查看打包結(jié)果，可以看到，可以將index對應的文件全部放在index文件目錄下，如果我們需要打包home，直接npm run build:home

 File                                      Size             Gzipped

  dist\index\js\chunk-vendors.c60bfe2f.j    1837.82 KiB      527.87 KiB
  s
  dist\index\js\index.e2aa144d.js           11.28 KiB        4.12 KiB
  dist\index\js\about.2a86a3cb.js           0.43 KiB         0.28 KiB
  dist\index\css\chunk-vendors.ef376986.    456.88 KiB       55.99 KiB
  css
  dist\index\css\index.5dfa7415.css         0.45 KiB         0.28 KiB

  Images and other types of assets omitted.
  Build at: 2022-05-03T03:46:54.824Z - Hash: e2d53105a245deab - Time: 12711ms

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

現(xiàn)在我們已經(jīng)實現(xiàn)了，單獨page單獨打包，但我們?nèi)绻耄粋€命令打包所有的page呢。這個時候我們就需要node一個方法來幫助我們實現(xiàn)了我們在單獨建一個js文件代碼如下

const fs = require('fs');
const execSync = require('child_process').execSync;
const { buildEntries } = require('../config/getPages');

// 移除目錄
function deleteDist(path) {
  let files = [];
  // 判斷目錄是否存在
  if (fs.existsSync(path)) {
    files = fs.readdirSync(path); // 讀取目錄
    // @ts-ignore
    files.forEach((file) => {
      const curPath = path + '/' + file; // 拼接目錄寫文件完整路徑
      if (fs.statSync(curPath).isDirectory()) { // 讀取文件路徑狀態(tài) 判斷是否為文件夾 如果為文件夾，遞歸
        deleteDist(curPath);
      } else {
        fs.unlinkSync(curPath); // 刪除文件
      }
    });
    fs.rmdirSync(path);
  }
}
try {
  const startTime = Date.now();
  process.env.NODE_ENV = 'production';  // 切換環(huán)境為生產(chǎn)
  // 執(zhí)行打包前刪除dist目錄
  deleteDist('./dist');
  for (const page of buildEntries) {
    // 可以執(zhí)行我們的命令,第一個參數(shù)是命令,第二個參數(shù)的意思是輸出子進程中的日志
    execSync(`vue-cli-service build ${page} --no-clean`, { stdio: 'inherit' });
  }
  // 重置
  process.env.NODE_ENV = undefined;
  const time = Date.now() - startTime;
  console.log('\033[42;30m ALL DONE \033[0m Build Compiled successfully in ' + `${time / 1000}s`);
} catch (e) {
  console.log('\033[41;30m FAILED \033[0m ' + e);
}

思想就是循環(huán)執(zhí)行打包命令關(guān)鍵在于execSync方法來替我們執(zhí)行打包命令,現(xiàn)在我們執(zhí)行,npm run _build