日韩视频区,av高清毛片,自拍偷拍在线视频

頁面目錄結構

Vue-CLI多頁分目錄打包的步驟記錄

注意需要將默認的 html 模板文件 public/index.html 移動到根目錄下。

安裝依賴

npm i --save-dev cross-env tasksfile

build/pages.js

獲取 Vue CLI 需要的多頁對象

const path = require("path")
const glob = require("glob")
const fs = require("fs")

const isProduction = process.env.NODE_ENV === "production"

// 自定義不同模塊的頁面 title
const titleMap = {
  index: "首頁"
}

function getPages (globPath) {
  const pages = {}
  glob.sync(globPath).forEach((item) => {
    const stats = fs.statSync(item)
    if (stats.isDirectory()) {
      const basename = path.basename(item, path.extname(item))

      // 如果模塊目錄下有 index.html 則使用該文件為 html 模板文件
      const template = fs.existsSync(`${item}/index.html`)
        ? `${item}/index.html`
        : path.join(__dirname, "../index.html")

      pages[basename] = {
        entry: `${item}/main.js`,
        title: titleMap[basename] || "默認頁面",
        template,
        // 這行代碼很重要
        // 兼容開發和生產時 html 頁面層級一致
        filename: isProduction ? "index.html" : `${basename}/index.html`
      }
    }
  })
  return pages
}

const pages = getPages(path.join(__dirname, "../src/pages/*"))

module.exports = pages

build/index.js

執行構建命令，循環執行 vue-cli-service build 。

const chalk = require("chalk")
const rimraf = require("rimraf")
const { sh } = require("tasksfile")

const PAGES = require("./pages")

// vue-cli-service --mode 值
const mode = process.env.MODE || "prod"

// 模塊名，可能為多個
const moduleNames = process.argv[2]

// 全部頁面列表
const pageList = Object.keys(PAGES)

// 有效模塊列表 未指定則為全部頁面列表
const validPageList = moduleNames ? moduleNames.split(",").filter((item) => pageList.includes(item)) : pageList
if (!validPageList.length) {
  console.log(chalk.red("**模塊名不正確**"))
  return
}

console.log(chalk.blue(`有效模塊:${validPageList.join(",")}`))

// 刪除 dist 目錄
rimraf.sync("dist")

console.time("總編譯時間")
const count = validPageList.length
let current = 0
// 逐個執行模塊編譯
for (let i = 0; i < validPageList.length; i += 1) {
  const moduleName = validPageList[i]
  process.env.MODULE_NAME = moduleName

  console.log(chalk.blue(`${moduleName} 模塊開始編譯`))

  // 通過 vue-cli-service build 編譯
  sh(`vue-cli-service build --mode ${mode}`, { async: true }).then(() => {
    console.log(chalk.blue(`${moduleName} 模塊編譯完成`))
    console.log()
    current += 1
    if (current === count) {
      console.log(chalk.blue("-----全部模塊編譯完成-----"))
      console.timeEnd("總編譯時間")
    }
  })
}

build/dev-modules.js

自定義本地開發時需要編譯的模塊，模塊名為 src/pages 下的文件夾名。

// 本地開發需要編譯的模塊
module.exports = [

]

vue.config.js

const chalk = require("chalk")

const devModuleList = require("./build/dev-modules")

const isProduction = process.env.NODE_ENV === "production"

// 總的頁面
const PAGES = require("./build/pages")

for (const basename in PAGES) {
  if (Object.prototype.hasOwnProperty.call(PAGES, basename)) {
    PAGES[basename].chunks = [
      "chunk-vue",
      "chunk-vendors",
      "chunk-common",
      `${basename}`
    ]
  }
}

let pages = {}
const moduleName = process.env.MODULE_NAME

if (isProduction) {
  // 構建模塊的名稱
  if (!PAGES[moduleName]) {
    console.log(chalk.red("**模塊名不正確**"))
    return
  }
  pages[moduleName] = PAGES[moduleName]
} else {
  // 本地開發編譯的模塊
  // 編譯全部
  if (process.env.DEV_MODULE === "all") {
    pages = PAGES
  } else {
    // 編譯部分模塊
    const moduleList = [
      // 固定編譯的模塊
      "index",
      "login",
      // 自定義編譯的模塊
      ...devModuleList
    ]
    moduleList.forEach(item => {
      pages[item] = PAGES[item]
    })
  }
}

module.exports = {
  // 這行代碼很重要
  publicPath: isProduction ? "./" : "/",
  pages,
  // 這行代碼很重要
  outputDir: isProduction ? `dist/${moduleName}` : "dist",
  productionSourceMap: false,
  css: {
    loaderOptions: {
      sass: {
        prependData: "@import "~@/styles/variables.scss";"
      }
    }
  },
  chainWebpack: (config) => {
    config.optimization.splitChunks({
      cacheGroups: {
        vue: {
          name: "chunk-vue",
          test: /[/]node_modules[/]_?(vue|vue-router|vuex|element-ui)(@.*)?[/]/,
          priority: -1,
          chunks: "initial"
        },
        vendors: {
          name: "chunk-vendors",
          test: /[/]node_modules[/]/,
          priority: -10,
          chunks: "initial"
        },
        common: {
          name: "chunk-common",
          minChunks: 2,
          priority: -20,
          chunks: "initial",
          reuseExistingChunk: true
        }
      }
    })
  }
}

package.json

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "serve:all": "cross-env DEV_MODULE=all vue-cli-service serve",
    "build:test": "cross-env MODE=test node build/index.js",
    "build:prod": "cross-env MODE=prod node build/index.js",
    "lint": "vue-cli-service lint",
  }
}