欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue單頁面改造多頁面應(yīng)用詳解第2/2頁

 更新時間:2022年06月26日 10:03:57   作者:web老猴子  
本文主要介紹了vue單頁面改造多頁面應(yīng)用詳解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
= { 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對應(yīng)的文件全部放在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

image.png

至此我們的多頁面打包基本完成,后續(xù)也可以做一些cdn的處理,或者chunks的拆包等優(yōu)化。小伙伴們自行研究

到此這篇關(guān)于vue單頁面改造多頁面應(yīng)用詳解的文章就介紹到這了,更多相關(guān)vue單頁面改造多頁面 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue 使用鼠標(biāo)滾動加載數(shù)據(jù)的例子

    vue 使用鼠標(biāo)滾動加載數(shù)據(jù)的例子

    今天小編就為大家分享一篇vue 使用鼠標(biāo)滾動加載數(shù)據(jù)的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • vue在install時node-sass@4.14.1?postinstall:node?scripts/build.js錯誤解決

    vue在install時node-sass@4.14.1?postinstall:node?scripts/buil

    最近在npm install 的時候遇到了個問題,所以給大家總結(jié)下,下面這篇文章主要給大家介紹了關(guān)于vue在install時node-sass@4.14.1?postinstall:node?scripts/build.js錯誤的解決方法,需要的朋友可以參考下
    2023-05-05
  • vue項目中常用解決跨域的方法總結(jié)(CORS和Proxy)

    vue項目中常用解決跨域的方法總結(jié)(CORS和Proxy)

    在vue項目中,一般我們會遇到跨域的問題,vue項目中解決跨域是非常簡單的,下面這篇文章主要給大家介紹了關(guān)于vue項目中常用解決跨域的方法,主要解釋CROS和Proxy兩種方式,需要的朋友可以參考下
    2022-12-12
  • vue使用axios實現(xiàn)文件上傳進度的實時更新詳解

    vue使用axios實現(xiàn)文件上傳進度的實時更新詳解

    最近在學(xué)習(xí)axios,然后項目就用到了,所以這篇文章主要給大家介紹了關(guān)于vue中利用axios實現(xiàn)文件上傳進度的實時更新的相關(guān)資料,文中先對axios進行了簡單的介紹,方法大家理解學(xué)習(xí),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-12-12
  • vue3導(dǎo)入excel并解析excel數(shù)據(jù)渲染到表格中(純前端實現(xiàn))

    vue3導(dǎo)入excel并解析excel數(shù)據(jù)渲染到表格中(純前端實現(xiàn))

    在Vue中實現(xiàn)導(dǎo)出Excel有多種方式,可以通過前端實現(xiàn),也可以通過前后端配合實現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue3導(dǎo)入excel并解析excel數(shù)據(jù)渲染到表格中的相關(guān)資料,文中介紹的方法是純前端實現(xiàn),需要的朋友可以參考下
    2024-04-04
  • 淺談vue父子組件怎么傳值

    淺談vue父子組件怎么傳值

    這篇文章主要介紹了淺談vue父子組件怎么傳值,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • Vue開發(fā)之watch監(jiān)聽數(shù)組、對象、變量操作分析

    Vue開發(fā)之watch監(jiān)聽數(shù)組、對象、變量操作分析

    這篇文章主要介紹了Vue開發(fā)之watch監(jiān)聽數(shù)組、對象、變量操作,結(jié)合實例形式分析了vue.js使用Watch針對數(shù)組、對象、變量監(jiān)聽相關(guān)操作技巧,需要的朋友可以參考下
    2019-04-04
  • 完美解決axios跨域請求出錯的問題

    完美解決axios跨域請求出錯的問題

    下面小編就為大家分享一篇完美解決axios跨域請求出錯的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02
  • 解決Echarts2豎直datazoom滑動后顯示數(shù)據(jù)不全的問題

    解決Echarts2豎直datazoom滑動后顯示數(shù)據(jù)不全的問題

    這篇文章主要介紹了解決Echarts2豎直datazoom滑動后顯示數(shù)據(jù)不全的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • Vue密碼登陸加密RSA實現(xiàn)方案

    Vue密碼登陸加密RSA實現(xiàn)方案

    這篇文章主要介紹了Vue密碼登陸加密RSA實現(xiàn)方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-07-07

最新評論