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

현지 개발
로 컬 개발 시 npm run serve 는 사용자 정의 모듈 디 렉 터 리 를 컴 파일 하고 npm run server:all 은 모든 모듈 디 렉 터 리 를 컴 파일 합 니 다.
로 컬 개발 시 컴 파일 된 디 렉 터 리 구 조 는 다음 과 같 습 니 다.

그래서 시작 하면 주 소 를http://localhost:8080/index/index.html로 바 꿔 야 합 니 다.
포장 결과
구축 시npm run build:prod 모든 페이지 를 포장 하고npm run build:prod index index 페이지 만 포장 합 니 다.
포 장 된 디 렉 터 리 구 조 는 다음 과 같 습 니 다.

이렇게 서로 다른 모듈 사 이 를 뛰 어 넘 을 때 일치 하 는 상대 경로 로 뛰 어 넘 는 방식 을 사용 할 수 있 습 니 다../index/index.html.
포장 후 각 모듈 의 내용 을 하나의 단독 디 렉 터 리 에 포장 합 니 다.
Github 주소
총결산
Vue-CLI 멀 티 페이지 디 렉 터 리 패키지 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue-CLI 멀 티 페이지 디 렉 터 리 패키지 에 관 한 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 읽 어 주시 기 바 랍 니 다.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!