vue-cli3配置多项目并按项目分别实现打包

 更新时间:2023年01月14日 08:56:25   作者:lmy233  
这篇文章主要介绍了vue-cli3配置多项目并按项目分别实现打包方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue-cli3配置多项目并按项目分别打包

demo地址:https://github.com/lmy01/vue-multipage

本次项目由于分为客户端和客服端,第一反应便是在vue中构建多页面。

项目结构

这里主要讲解下面所标文件的用处

vue.config.js相关配置

配置好之后,运行npm run build,项目被打包到dist文件夹下,结果如下图:

可以看出不同项目的资源都会打包到了一起,但这不是我想要的结果,那么接下来只需要修改一下vue.config.js配置,即可使打包的文件按照项目进行分离。

let projectName = process.argv[3]
let glob = require('glob')

function getEntry() {
  let entries = {}
  if (process.env.NODE_ENV == 'production') {
    entries = {
      index: {
        // page的入口
        entry: 'src/views/' + projectName + '/'+projectName+'.js',
        // 模板来源
        template: 'public/'+projectName+'.html',
        // 在 dist/index.html 的输出
        filename: 'index.html',
        title: 'CIMS--'+projectName,
        chunks: ['chunk-vendors', 'chunk-common', 'index']
      }
    }
  } else {
    let items = glob.sync( './src/views/*/*.js')
    for (let i in items) {
      let filepath = items[i]
      let fileList = filepath.split('/');
      let fileName = fileList[fileList.length-2];
      entries[fileName] = {
        entry: `src/views/${fileName}/${fileName}.js`,
        // 模板来源
        template: `public/${fileName}.html`,
        // 在 dist/index.html 的输出
        filename: `${fileName}.html`,
        title:`CIMS--${fileName}`,
        // 提取出来的通用 chunk 和 vendor chunk。
        chunks: ['chunk-vendors', 'chunk-common', fileName]
      }
    }
  }
  return entries
}

let pages = getEntry()

module.exports = {

    outputDir: 'dist/' + projectName,
    productionSourceMap: false,
    pages:pages,
}

注意

这时候再打包需要逐个对项目进行打包,npm run build client npm run build console

下面就是打包后的每个项目文件夹下的文件。

但是我们发现public里面的模板文件也被打包进来了,这是因为public是专门存放静态文件的,打包的时候会把public里的内容原样输出到打包后的文件夹中,如果我们不想让他打包进去,那么就把模板文件从public文件夹中拿出来,我们在项目根目录下重新建一个文件夹(/html),用来存放这两个模板文件。

最后一步

把vue.config.js配置里的模板文件路径修改一下。

运行npm run build client 和 npm run build console,发现原来的模板文件没有了。

补充:开发环境如何进入不同项目环境

npm run dev 后,浏览器会打开一个页面并提示找不到路径

这是因为没有进入到具体某个项目环境,这时只需要再路径后面加上/项目名即可打开指定项目,例如

这时回车后,会进入到该项目的路由配置的’’/’'页面中。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 浅谈vue-router 路由传参的方法

    浅谈vue-router 路由传参的方法

    这篇文章主要介绍了浅谈vue-router 路由传参的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • Vue中如何运用TS语法

    Vue中如何运用TS语法

    本文主要介绍了Vue中如何运用TS语法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • Vue导出excel的两个常用方式介绍与对比

    Vue导出excel的两个常用方式介绍与对比

    这篇文章主要为大家详细介绍了Vue导出excel的两个常用方式,分别为前端vue+XLSX导出excel和vue+后端POI 导出excel,感兴趣的小伙伴可以了解下
    2025-01-01
  • vue中实现页面刷新以及局部刷新的方法

    vue中实现页面刷新以及局部刷新的方法

    这篇文章主要给大家介绍了关于vue中实现页面刷新以及局部刷新的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-01-01
  • 15个Vue技巧,你都知道吗

    15个Vue技巧,你都知道吗

    在使用 Vue 开发的这几年里,掌握一些有用的技巧,使用一些更高级的技术点,总会有用的,本文就介绍了15个Vue技巧,具有一定的参考价值,感兴趣的可以了解一下
    2022-02-02
  • Vue中如何进行数据响应式更新

    Vue中如何进行数据响应式更新

    Vue是一款流行的JavaScript框架,它提供了数据响应式更新的能力,可以让我们轻松地更新数据,并自动更新视图,本文将介绍Vue中如何进行数据响应式更新,包括使用Vue的响应式系统、使用计算属性和使用Vue的watcher,需要的朋友可以参考下
    2023-06-06
  • 详解Vue 换肤方案验证

    详解Vue 换肤方案验证

    这篇文章主要介绍了Vue 换肤方案验证,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vue/cli 配置动态代理无需重启服务的操作方法

    vue/cli 配置动态代理无需重启服务的操作方法

    vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,分为vue init webpack-simple 项目名和vue init webpack 项目名两种,这篇文章主要介绍了vue/cli 配置动态代理,无需重启服务,需要的朋友可以参考下
    2022-05-05
  • 纯前端使用Vue3上传文件到minio文件服务器(粘贴可直接用)

    纯前端使用Vue3上传文件到minio文件服务器(粘贴可直接用)

    vue是目前最流行的前端框架,下面这篇文章主要给大家介绍了关于纯前端使用Vue3上传文件到minio文件服务器的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-04-04
  • vue 根据选择的月份动态展示日期对应的星期几

    vue 根据选择的月份动态展示日期对应的星期几

    这篇文章主要介绍了vue 如何根据选择的月份动态展示日期对应的星期几,帮助大家更好的利用vue框架处理日期需求,感兴趣的朋友可以了解下
    2021-02-02

最新评论