广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue-cli3配置多项目并按项目分别实现打包
  • 782
分享到

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

vue-cli3配置多项目vue-cli3打包vue-cli3配置 2023-01-14 12:01:31 782人浏览 独家记忆
摘要

目录Vue-cli3配置多项目并按项目分别打包项目结构vue.config.js相关配置注意最后一步补充:开发环境如何进入不同项目环境总结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 后,浏览器会打开一个页面并提示找不到路径

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

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue-cli3配置多项目并按项目分别实现打包

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

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

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作