您好,登錄后才能下訂單哦!
使用Vue-CLI怎么實現(xiàn)多頁分目錄打包?相信很多沒有經(jīng)驗的人對此束手無策,為此本文總結了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。
注意需要將默認的 html 模板文件 public/index.html 移動到根目錄下。
npm i --save-dev cross-env tasksfile
獲取 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, // 這行代碼很重要 // 兼容開發(fā)和生產(chǎn)時 html 頁面層級一致 filename: isProduction ? 'index.html' : `${basename}/index.html` } } }) return pages } const pages = getPages(path.join(__dirname, '../src/pages/*')) module.exports = pages
執(zhí)行構建命令,循環(huán)執(zhí)行 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 // 逐個執(zhí)行模塊編譯 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('總編譯時間') } }) }
自定義本地開發(fā)時需要編譯的模塊,模塊名為 src/pages 下的文件夾名。
// 本地開發(fā)需要編譯的模塊 module.exports = [ ]
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 { // 本地開發(fā)編譯的模塊 // 編譯全部 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 } } }) } }
{ "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", } }
本地開發(fā)時,npm run serve 會編譯自定義的模塊目錄,npm run serve:all 會編譯全部模塊目錄。
本地開發(fā)時編譯后的目錄結構如下:
所以啟動后,需要將地址改為 http://localhost:8080/index/index.html 。
構建時, npm run build:prod
打包全部頁面,npm run build:prod index
僅打包 index 頁面。
打包后的目錄結構如下:
看完上述內(nèi)容,你們掌握使用Vue-CLI怎么實現(xiàn)多頁分目錄打包的方法了嗎?如果還想學到更多技能或想了解更多相關內(nèi)容,歡迎關注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。