vue-cli5多入口项目分项目编译打包并部署nginx

项目准备

假设有两个项目A和B,我们希望访问localhost:9000/projectA来访问项目A,访问localhost:9000/projectB来访问项目B.

项目结构

目录结构

项目配置

vue.config.js
var projectname = process.argv[3]
function getEntry() {
  var entries = {}
  if (process.env.NODE_ENV == 'production') {
    entries = {
      index: {
        // page的入口
        entry: projectname == 'projectA'?'src/views/projectA/main.js' : 'src/views/projectB/main.js',
        // 模板来源
        template: 'public/index.html',
        // 在 dist/index.html 的输出
        filename: 'index.html',
        title: projectname,
        chunks: ['chunk-vendors', 'chunk-common', 'index']
      }
    }
  } else {
    entries = {
      projectA: {
        entry: 'src/views/projectA/main.js',
        template: 'public/index.html',
        filename: 'projectA.html',
        title: 'projectA',
        chunks: ['chunk-vendors', 'chunk-common', 'projectA']
      },
      projectB: {
        entry: src/views/projectB/main.js',
        template: 'public/index.html',
        filename: 'projectB.html',
        title: 'projectB',
        chunks: ['chunk-vendors', 'chunk-common', 'projectB']
      }
    }
  }
  return entries
}
var pages = getEntry()
module.exports = defineConfig({
  pages: pages,
  outputDir: 'dist' + projectname, 
  publicPath: projectname == 'projectA'?'/projectA/':'/projectB/',
  transpileDependencies: true,
  lintOnSave: false ,//如果为false,就是取消eslint规则的检查  解决低node版本报错问题 
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
  },
})
package.json
"build projectA": "vue-cli-service build",
"build projectB": "vue-cli-service build",

项目本地运行

npm run serve

项目本地运行访问

  • localhost:9000/projectA
  • localhost:9000/projectB

项目分开打包

//打包命令
npm run build projectA
npm run build projectB
//打包结果(与public同级):distprojectA  distprojectB

项目部署(nginx)

  • nginx安装目录下新建文件夹muldist用来存放前端文件;
  • 把打包结果distprojectA distprojectB复制到文件夹muldist下;
  • 打开配置文件nginx.conf,部署多项目(可看添加链接描述这篇文章,修改配置如下:
server {
       listen       9000;
       server_name  localhost;

       location /projectA{
           alias   muldist/distprojectA /;
           index  index.html index.htm;
           try_files $uri $uri/ /index.html;
       }
       location /projectB{
           alias   muldist/distprojectB/;
           index  index.html index.htm;
           try_files $uri $uri/ /index.html;
       }
       location / {
           root   muldist/distprojectA ;
           index  index.html index.htm;
           try_files $uri $uri/ /index.html;
       }
    }
  • nginx运行(可看添加链接描述这篇文章);
  • 项目访问;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/488797.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

网站升级https教程

现在越来越多的网站开始升级https协议,其实早在2014年百度就已经开始支持https协议了,且对于在开启了https的网站会增加其搜索权重,意思是在同类网站中,开启了https的网站搜索排名会增加优先度,搜索到的排名也会增加&a…

Netty学习——源码篇6 Pipeline设计原理

1 Pipeline设计原理 在Netty中每个Channel都有且仅有一个ChannelPipeline与之对应,它们的组成关系如下图: 通过上图可以看到,一个Channel包含了一个ChannelPipeline,而ChannelPipeline中又维护了一个由ChannelHandlerContext组成的…

云数据库认识

云数据库概述 说明云数据库厂商概述Amazon 云数据库产品Google 的云数据库产品Microsoft 的云数据库产品 云数据库系统架构UMP 系统概述UMP 系统架构MnesiaRabbitMQZooKeeperLVSController 服务器Proxy 服务器Agent 服务器日志分析服务器 UMP 系统功能容灾 读写分离分库分表资源…

PyCharm环境下Git与Gitee联动:本地与远程仓库操作实战及常见问题解决方案

写在前面:本博客仅作记录学习之用,部分图片来自网络,如需引用请注明出处,同时如有侵犯您的权益,请联系删除! 文章目录 前言下载及安装GitGit的使用设置用户签名设置用户安全目录Git基本操作Git实操操作 Pyc…

设置远程访问 jupyter Notebook Lab

安装Anaconda / Miniconda 进入conda环境,安装jupyter https://jupyter.org/install 生成notebook config C:\Users\***>jupyter notebook --generate-config Writing default config to: C:\Users\***\.jupyter\jupyter_notebook_config.py创建密码 jupyter…

教你怎样根据空行分割TXT文本文档 TXT文本分割 文本拆分实例

比如有一些文本中间用多个空行隔开,需要把隔开的文本分别保存,比如我们要把隔2行或以上空行的文本分别保存成一个文档,如图: 实现方法: 1、先打开首助编辑高手软件,进入【文本批量操作】--【拆分文本】&am…

Gin中的gin.Context与Golang原生的context.Context区别与联系

一.gin中的context gin.Context 1.概念 在 Gin 中,Context 是一个非常重要的概念,它是Gin的核心结构体之一,用于处理 HTTP 请求和响应,在 Gin 的处理流程中,Context 贯穿整个处理过程,用于传递请求和响应的信息Gin 的 Context 是…

python进阶:装饰器

装饰器本质上是一个Python函数,它可以让其他函数在不需要做任何代码变动的前提下增加额外功能,装饰器的返回值也是一个函数对象。它经常用于有切面需求的场景,比如:插入日志、性能测试、事务处理、缓存、权限校验等场景。装饰器是…

【python】获取4K壁纸保存到本地文件夹【附源码】

图片信息丰富多彩,许多网站上都有大量精美的图片资源。有时候我们可能需要批量下载这些图片,而手动一个个下载显然效率太低。因此,编写一个简单的网站图片爬取程序可以帮助我们高效地获取所需的图片资源。 目标网站: 如果出现模…

软件开发困境

软件开发的困境开发者的困境人月神话 布鲁克斯的核心观点包括: EAI (企业应用集成) 通过EAI,企业能够实现以下功能:实例介绍 信息孤岛软件开发有没有“银弹”? 软件开发的困境 在软件开发过程中&#xff0…

FPGA时钟资源详解(3)——全局时钟资源

FPGA时钟系列文章总览:FPGA原理与结构(14)——时钟资源https://ztzhang.blog.csdn.net/article/details/132307564 一、概述 全局时钟是 FPGA 中的一种专用互连网络,旨在将时钟信号分配到 FPGA 内各种资源的时钟输入处。这种设计…

ARM IHI0069F GIC architecture specification (4)

1.3 支持的配置和兼容性 在 Armv8-A 中,EL2 和 EL3 是可选的,PE 可以支持一个、两个或都不支持这些异常级别。 然而: • PE 要求EL3 支持安全和非安全状态。 • PE 需要EL2 来支持虚拟化。 • 如果未实施EL3,则只有一个安全状态。…

Mysql数据库——数据备份与恢复

目录 一、数据备份的重要性 二、数据库备份的分类 1.从物理与逻辑的角度分类 2.从数据库的备份策略角度,备份可分为 2.1完全备份 2.2差异备份 2.3增量备份 2.4总结 三、常见的备份方法 四、Mysql数据库完全备份 1.完全备份定义 2.优缺点 3.数据库完全备…

FPGA时钟资源详解(4)——区域时钟资源

FPGA时钟系列文章总览:FPGA原理与结构(14)——时钟资源https://ztzhang.blog.csdn.net/article/details/132307564 目录 一、概述 二、Clock-Capable I/O 三、I/O 时钟缓冲器 —— BUFIO 3.1 I/O 时钟缓冲器 3.2 BUFIO原语 四、区域时钟…

【每日一题】2642. 设计可以求最短路径的图类-2024.3.26

题目: 2642. 设计可以求最短路径的图类 给你一个有 n 个节点的 有向带权 图,节点编号为 0 到 n - 1 。图中的初始边用数组 edges 表示,其中 edges[i] [fromi, toi, edgeCosti] 表示从 fromi 到 toi 有一条代价为 edgeCosti 的边。 请你实…

计算机网络——数据链路层(差错控制)

计算机网络——数据链路层(差错控制) 差错从何而来数据链路层的差错控制检错编码奇偶校验码循环冗余校验(CRC)FCS 纠错编码海明码海明距离纠错流程确定校验码的位数r确定校验码和数据位置 求出校验码的值检错并纠错 我们今年天来继…

搜维尔科技:「工业仿真」煤炭矿井模拟仿真救援项目实施

煤炭矿井模拟救援系统满足煤矿企业在紧急避险应急演练方面的实际需要,在不耽误井下正常生产的情况下,高效率、低成本地实现对本矿区入井人员进行避灾演练培训,并学会正确的避灾自救互救方法。并可在本系统中直观的看到人员定位系统、监控系统…

Java毕业设计 基于SSM网上二手书店系统

Java毕业设计 基于SSM网上二手书店系统 SSM jsp 网上二手书店系统 功能介绍 用户:首页 图片轮播 图书查询 图书分类显示 友情链接 登录 注册 图书信息 图片详情 评价信息 加入购物车 资讯信息 资讯详情 个人中心 个人信息 修改密码 意见信息 图书收藏 已经付款 邮…

JavaWeb项目——MVC架构框架

表现层(UI):直接跟前端打交互(一是接收前端ajax请求,二是返回json数据给前端)业务逻辑层(BLL):一是处理表现层转发过来的前端请求(也就是具体业务&#xff09…

群晖NAS安装Video Station结合内网穿透实现公网访问本地影音文件

文章目录 1.使用环境要求:2.下载群晖videostation:3.公网访问本地群晖videostation中的电影:4.公网条件下使用电脑浏览器访问本地群晖video station5.公网条件下使用移动端(搭载安卓,ios,ipados等系统的设备…