返回顶部
首页 > 资讯 > 精选 >使用Vue-CLI怎么实现多页分目录打包
  • 340
分享到

使用Vue-CLI怎么实现多页分目录打包

2023-06-14 12:06:55 340人浏览 薄情痞子
摘要

使用Vue-CLI怎么实现多页分目录打包?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。页面目录结构注意需要将默认的 html 模板文件 public/index.html&nb

使用Vue-CLI怎么实现多页分目录打包?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

页面目录结构

使用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'// 自定义不同模块的页面 titleconst 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)) : pageListif (!validPageList.length) {  console.log(chalk.red('**模块名不正确**'))  return}console.log(chalk.blue(`有效模块:${validPageList.join(',')}`))// 删除 dist 目录rimraf.sync('dist')console.time('总编译时间')const count = validPageList.lengthlet 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_NAMEif (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 serve:all 会编译全部模块目录。

本地开发时编译后的目录结构如下:

使用Vue-CLI怎么实现多页分目录打包

所以启动后,需要将地址改为 Http://localhost:8080/index/index.html 。

打包结果

构建时, npm run build:prod 打包全部页面,npm run build:prod index 仅打包 index 页面。

打包后的目录结构如下:

使用Vue-CLI怎么实现多页分目录打包

看完上述内容,你们掌握使用Vue-CLI怎么实现多页分目录打包的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注编程网精选频道,感谢各位的阅读!

--结束END--

本文标题: 使用Vue-CLI怎么实现多页分目录打包

本文链接: https://www.lsjlt.com/news/271058.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 使用Vue-CLI怎么实现多页分目录打包
    使用Vue-CLI怎么实现多页分目录打包?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。页面目录结构注意需要将默认的 html 模板文件 public/index.html&nb...
    99+
    2023-06-14
  • Vue-CLI多页分目录打包的步骤记录
    页面目录结构 注意需要将默认的 html 模板文件 public/index.html  移动到根目录下。 安装依赖 npm i --save-dev cross-en...
    99+
    2024-04-02
  • 怎么使用vue cli实现项目登陆页面
    这篇文章主要介绍“怎么使用vue cli实现项目登陆页面”,在日常操作中,相信很多人在怎么使用vue cli实现项目登陆页面问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么使用vue&n...
    99+
    2023-07-04
  • 如何使用vue-cli创建项目并webpack打包
    这篇文章主要介绍“如何使用vue-cli创建项目并webpack打包”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“如何使用vue-cli创建项目并webpack打包...
    99+
    2024-04-02
  • vue-cli3配置多项目并按项目分别实现打包
    目录vue-cli3配置多项目并按项目分别打包项目结构vue.config.js相关配置注意最后一步补充:开发环境如何进入不同项目环境总结vue-cli3配置多项目并按项目分别打包 ...
    99+
    2023-01-14
    vue-cli3配置多项目 vue-cli3打包 vue-cli3配置
  • vue-cli多页面应用实践之实现组件预览项目
    目录vue-cli 多页面应用实现组件预览项目多页面应用配置页面布局左侧菜单栏中间区域右侧手机页功能扩展建议仓库源码总结vue-cli 多页面应用 vue技术栈的同学,大多是用vue...
    99+
    2024-04-02
  • vue-cli如何构建vue应用并实现webpack打包
    这篇文章主要介绍vue-cli如何构建vue应用并实现webpack打包,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Vue是什么,是一套构建用户界面的渐进式框架(官网解释),什么叫...
    99+
    2024-04-02
  • 如何实现Vue项目分环境打包
    小编给大家分享一下如何实现Vue项目分环境打包,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!第1步:安装cross-env在项目...
    99+
    2024-04-02
  • 使用vue-cli创建项目并webpack打包的操作方法
    1.准备环境(nodejs下载和设置环境变量) 2.全局安装vue-cli,提供vue命令进行创建vue项目 npm install -g @vue/cli 关于旧版本 Vue...
    99+
    2024-04-02
  • SpringCloud maven-assembly-plugin 多级目录打包的实现
    目录1、spring-boot-maven-plugin2、maven-assembly-plugin3、maven-assembly-plugin打包后的可执行文件缺失lib问题1...
    99+
    2024-04-02
  • vue项目怎么使用electron进行打包
    这篇文章主要介绍“vue项目怎么使用electron进行打包”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue项目怎么使用electron进行打包”文章能帮助大家解决问题。一、设置国内镜像npm&...
    99+
    2023-07-05
  • vue项目打包部署跨域怎么实现
    本篇文章和大家了解一下vue项目打包部署跨域怎么实现。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。跨源资源共享(CORS,或通俗地译为跨域资源共享)是一种基于 HTTP 头的机制,该机制通过允许服务器标示除了它自己以外的...
    99+
    2023-07-06
  • 使用 vue-cli怎么搭建一个vue项目
    使用 vue-cli怎么搭建一个vue项目,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。 一、 安装 node.js首先需要安装no...
    99+
    2024-04-02
  • 使用jenkins一键打包发布vue项目的实现
    目录jenkins的安装安装更换端口号(默认运行在8080端口)基础配置发布vue项目安装插件-nodejs配置nodejs插件创建任务jenkins的安装 Jenkins是一款开源...
    99+
    2024-04-02
  • 如何解决vue-cli项目打包出现空白页和路径错误的问题
    这篇文章主要介绍了如何解决vue-cli项目打包出现空白页和路径错误的问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。vue-cli项目打...
    99+
    2024-04-02
  • 怎么使用HBuilderX把vue项目打包成apk
    本篇内容主要讲解“怎么使用HBuilderX把vue项目打包成apk”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么使用HBuilderX把vue项目打包成apk”吧!1. 下载HBuilde...
    99+
    2023-07-02
  • 怎么在Android中使用gradle打包Assets目录
    这篇文章主要介绍了怎么在Android中使用gradle打包Assets目录,此处通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考价值,需要的朋友可以参考下:1 在你的src或者main目录上右键new;2 在Folder...
    99+
    2023-06-06
  • Qt项目打包怎么实现
    这篇文章主要介绍了Qt项目打包怎么实现的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Qt项目打包怎么实现文章都会有所收获,下面我们一起来看看吧。准备项目文件本质上就是把依赖的动态库放到你指定的文件夹里面去;这样...
    99+
    2023-06-30
  • Vue如何实现多页面配置以及打包方式
    目录为什么会用多页面如何在vue.config.js配置多页面信息目录(四个页面)配置打包相关配置多页面相关总结为什么会用多页面 在开发时,对于同一类型的多网站,多页面大大节省开发时...
    99+
    2022-11-13
    Vue多页面配置 Vue打包 Vue配置页面
  • vue-cli 项目打包完成后运行文件路径报错怎么办
    小编给大家分享一下vue-cli 项目打包完成后运行文件路径报错怎么办,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!问题:刚新建...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作