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

目录
  • vue-cli3配置多项目并按项目分别打包
  • 项目结构
  • vue.config.js相关配置
    • 注意
    • 最后一步
  • 补充：开发环境如何进入不同项目环境
  • 总结

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 后，浏览器会打开一个页面并提示找不到路径

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

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue-cli配置打包文件本地使用的教程图解

    最近做的一个嵌入app的pc端项目,用的也是比较熟悉的vue-cli构建工具构建项目,需要的是打开dist文件夹入口html能加载到本地的静态文件,打包后的index.html加载文件如图: url中的路径据我们所知,最前面为一个反斜杠(/XX),表示从网站根目录开始搜索文件,如果需要相对当前文件夹则需以 ./或者不加反斜杠为路径开头,看来是打包后的文件路径有问题 于是就去找webpack.base.conf.js文件,有个output选项,output是webpack中对输出文件的配置,最常用

  • 基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法

    背景 •基于Vue-cli 项目产品部署,涉及到的交互的地址等配置信息,每次都要重新打包才能生效,极大的降低了效率.我们的目的是让项目实施的小伙伴重新快乐起来.网上实现的方式,都是半自动化的,还需要重新修改. 需求点 •配置化:打包后的配置文件可二次修改 •配置自动生成:vue-cli 提供了各种环境的打包,要实现相关配置文件的自动打包 •研发人员无痛感:对于产品研发人员来说,不需要增加额外的打包成本,基于Vue-cli的开发习惯不变. 实现步骤 一:配置自动生成 •安装generate-ass

  • Vue CLI 命令行打包配置自定义参数方式

    目录 前言 重点 vue.config.js 在 vue.config.js 文件中计算环境变量 配置 代码 命令 日志 使用 扩展 彩蛋 总结 前言 难点来自于需求,好那我们就说说我是因为什么需求呢? 需求:我要通过[页面ID]访问接口数据,进行Vue模块化构建包含[页面数据]的静态页面.我有很多的页面ID!!!(不要纠结为啥有这样的需求,干就完了) 思路: 1.通过命令行打包时传入[页面ID] 2.Vue构建过程中访问接口生成静态页面 3.发布部署 重点 vue.config.js vue.

  • vue cli3 配置proxy代理无效的解决

    vue cli3 创建的vue项目配置开发环境代理无效,网上的各种配置都试了,还是不行,最后终于试出来一种配置方法 vue.config.js配置如下内容(不要配置任何多余的选项,什么changOrigin pathRewrite 之类的东西都不要配): module.exports = { devServer: { proxy:"http://127.0.0.1:8081", port: 8085 } } axios访问的时候不要配置任何东西,axios里访问的url不需要加任何前缀

  • vue cli3配置image-webpack-loader方式

    vue cli3配置image-webpack-loader方式

    目录 vue cli3配置image-webpack-loader 使用image-webpack-loader压缩图片报错 vue cli3配置image-webpack-loader vue cli3配置image-webpack-loader对图片进行压缩优化 安装 npm install image-webpack-loader --save-dev 配置vue.config.js chainWebpack: config => {     config.plugins.delete('

  • vue cli3 配置 stylus全局变量的使用方式

    目录 vue cli3配置stylus全局变量 vue cli3使用stylus全局变量 vue cli3配置stylus全局变量 首先在common.styl文件中写一些常用的css变量,方便全局使用,避免重复代码. 预想的是在main.js中引入common.styl文件,然后所有的.vue文件就都可以使用了.但是事与愿违,根本不起作用. 网络上有很多教程,但是都不起作用(找答案是个痛苦且漫长的过程),下面是总结的代码,基本开箱即用,希望能帮助到需要帮助的人. // vue.config.j

  • 详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计

    执行 npm run build 之后的 dist 目录的静态资源的文件名多会追加上 hash 值,比如: page1.f151b4d3.js 那如果不要 hash 呢,你只需要配置 vue.config.js 文件中的 filenameHashing 官方文档也提到了因为 html 也是我们通过插件生成的,静态资源直接就 inject 进去的,所以,当 html 不是自动生成或者其他情况时候,就不能加 hash 了,可以配置 false. filenameHashing: false 我们看看

  • 详解Vue CLI3配置解析之css.extract

    大家还记得我们在老版本中,对于线上环境配置中会把所有的 css 多打成一个文件: 核心是使用了插件 extract-text-webpack-plugin,方式如下: 第一步都是加载插件 const ExtractTextPlugin = require('extract-text-webpack-plugin') 这个插件的描述如下: Extract text from a bundle, or bundles, into a separate file. 然后配置如下:(省去了 rules

  • Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网

    1.准备工作. 1.首先准备安装Vue及Vue-CLI $ npm install vue $ npm install -g @vue/cli 2.其次下载Tomcat tomcat.apache.org/index.html 任选一个版本,我测试用的是macOS,所以下载了第二个压缩包 ​ 下载到本地后,解压缩,并且将解压缩后的文件夹复制到以下路径下,其中电脑名称就是你的用户名称. /Users/{电脑名称}/Library ,并且重命名为ApacheTomcat,这里要提一下,在这个文件夹下

  • vue@cli3项目模板怎么使用public目录下的静态文件

    作为图片最好放在static目录下,但是vue@cli3没有static,网上都说放在public目录下,行,那就放吧,可问题是图片放了怎么使用 第一次尝试 肯定用绝对路径这就不说了,用相对路径,webpack会解析成base64,可是绝对路径怎么输都不对,咋回事 后面看网上说把前面路径下的public路径去掉,好,开发环境没问题了,可打包报错怎么办,就这个我研究了好久. 解决问题 网上一大堆牛头不对马嘴的,我也是无语了 最后的最后,终于官网找到了完美的解决方案 如此设置,完美解决问题,如果你留

  • Vue cli3.0创建Vue项目的简单过程记录

    Vue cli3.0创建Vue项目的简单过程记录

    创建Vue项目 在要创建项目的文件夹下面打开Powershell窗口 输入命令 vue create 项目名称 选择第二项 回车后 选择是否使用历史路由 no 回车 选择 Less 回车 选择第三个 回车 选择第一个 回车 选择第一个 回车 是否保存模板 选择no 完成啦 完成 总结 到此这篇关于Vue cli3.0创建Vue项目的文章就介绍到这了,更多相关Vue cli3.0创建Vue项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

  • Django+Vue.js搭建前后端分离项目的示例

    Django+Vue.js搭建前后端分离项目的示例

    在写这篇文章的时候,顺带学习了一下关于Markdown的使用方法. 笔者是个渣渣,一切都是自己在摸索的学着,所以也谈不上什么体系.系统学习.在这里主要是为了实现把项目前后端分离开. 这里假设你的电脑上所需的django.vue.js已经有了,如果没有,往下拉就是vue.js的安装流程.django前面写过了,就不赘述了. 一,正常搭建前后端分离项目流程 1.创建django项目 命令: django-admin startproject ulb_manager 结构: ├── manage.py

  • vue、react等单页面项目应该这样子部署到服务器

    vue、react等单页面项目应该这样子部署到服务器

    最近好多伙伴说,我用vue做的项目本地是可以的,但部署到服务器遇到好多问题:资源找不到,直接访问index.html页面空白,刷新当前路由404...现在我们一起讨论下单页面如何部署到服务器? 由于前端路由缘故,单页面应用应该放到nginx或者apache.tomcat等web代理服务器中,千万不要直接访问index.html,同时要根据自己服务器的项目路径更改react或vue的路由地址. 如果说项目是直接跟在域名后面的,比如:http://www.sosout.com ,根路由就是 '/'.

随机推荐