以vue2为例,用npm开发环境在后端部署vue2项目(更推荐使用nginx部署)

因为之前一致出现的跨域问题,从而想到了这个办法,属于偏方。推荐使用nginx部署,再去解决跨域问题。

首先将你的前端vue项目拷贝一份到服务器,准备一个dockerfile文件,用这个进行部署首先你得前提是配置好了vue.config.js的跨域配置了,例如:

module.exports = {devServer: {proxy: {port: 8081,// vue运行端口号host: '0.0.0.0','/api': {target: 'http://your-spring-boot-server:8080', // 后端Spring Boot项目地址changeOrigin: true,pathRewrite: {'^/api': ''}}}}
};//axios的baseurl也得设置成const http = axios.create({baseURL: '/api', // 以访问以api开头timeout: 10000,}
)

一 、拷贝项目文件和制作Dockerfile
Ddckfile信息

# 使用Node.js官方镜像作为基础镜像
FROM node:14.17.5# 设置工作目录
WORKDIR /app# 复制项目文件到容器中
COPY ./app /app#配置docker容器里面的npm镜像源,不然可能会出现下载超时,出现错误
RUN npm config set registry https://registry.npm.taobao.org/# 安装项目依赖
RUN npm install# 打包前端应用
RUN npm run build# 设置容器启动命令
CMD ["npm", "run", "serve"]

接下来是创建docker镜像,运行容器即可

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【react】react生命周期钩子函数:

文章目录 一、生命周期概念:二、生命周期:三、挂载阶段(constructor > render > componentDidMount):四、更新阶段(render > componentDidUpdate):五、卸载阶段(componentWillUnmount …

css实现卡片的左上角有一个三角形的遮盖效果

需求: 卡片的左上角有一个绿色的三角形标签,用来区分状态 实现: .vCard{position: relative;overflow: hidden; } .vCard::before {content: "";position: absolute;top: 0;left: 0;width: 0;height: 0;border-bottom: 20px solid transparent;border-left: 20px …

HarmonyOS应用开发者基础与高级认证题库——中级篇

系列文章目录 HarmonyOS应用开发者基础与高级认证题库——基础篇 HarmonyOS应用开发者基础与高级认证题库——中级篇 文章目录 系列文章目录前言一、判断二、单选三、多选 前言 今天刚换了台果子手机就收到了华子鸿蒙开发认证邀请(认证链接)&#xff0…

Mac 创建和删除 Automator 工作流程,设置 Terminal 快捷键

1. 创建 Automator 流程 本文以创建一个快捷键启动 Terminal 的自动操作为示例。 点击打开 自动操作; 点击 新建文稿 点击 快速操作 选择 运行 AppleScript 填入以下内容 保存名为 “Open Terminal” 打开 设置 > 键盘,选择 键盘快捷键 以此选择 服…

ElasticsSearch基础概念和安装

ElasticSearch基础概念以及可视化界面安装 文章目录 ElasticSearch基础概念以及可视化界面安装1、引言2、基本概念3、倒排索引机制3.1、倒排索引 4、使用docker安装ElasticSearch4.1、下载镜像文件4.2 、创建实例,启动es 5.安装Kibana 1、引言 Elastic 的底层是开源库 Lucene。…

Docker DCT

DOCKER_CONTENT_TRUST 如何使用Docker Content Trust为容器确保安全?-51CTO.COM

大规模向量检索库Faiss学习总结记录

因为最近要使用到faiss来做检索和查询,所以这里只好抽出点时间来学习下,本文主要是自己最近学习的记录,来源于网络资料查询总结,仅用作个人学习总结记录。 Faiss的全称是Facebook AI Similarity Search,是FaceBook的A…

CRM系统哪些功能可以个性化定制?

不同的企业有着不同的业务流程和需求,因此在选型时就需要一款可以个性化定制的CRM系统。下面说说可以个性化定制的CRM系统的功能和优势。 如何实现个性化定制? Zoho CRM支持个性化定制,您可以创建自定义功能模块、字段以及业务流程&#xf…

Grafana集成prometheus(3.Grafana添加promethus数据)

添加数据库 选择Connections -> Datasources,点击Add New data source,填写Promitheus Server Url,点击 save & test完成配置 添加DashBorad 选择prometheus数据库选择code填入对应的查询公式(监控公式参考Prometheus监控公式)修改面板名称Ti…

NodeJS vmvm2沙箱逃逸

文章目录 NodeJS vm&vm2沙箱逃逸什么是沙箱?NodeJS的作用域exports是将文件元素输出的接口global全局对象 vm沙箱模块vm.runInThisContext(code)vm.createContext([sandbox])vm.runInContext(code,contextifiedSandbox[,options])vm.runInNewContext(code[,sand…

深度学习训练营之CGAN生成手势图像

深度学习训练营之CGAN生成手势 原文链接CGAN简单介绍环境介绍前置工作数据导入所需的包加载数据创建数据集查看数据集 模型设置初始化模型的权重定义生成器构造判别器 模型训练定义损失函数设置超参数正式开始训练 结果可视化 原文链接 🍨 本文为🔗365天…

怎样选择适合的爬虫ip服务商?

在当今数字化的时代,越来越多的企业和个人需要采集和分析大量的数据来进行市场调研、竞品分析、舆情监测等工作。而为了保护其数据和资源,很多网站采取了反爬虫措施,限制了普通用户和爬虫程序的访问。为了应对这种限制,许多人开始…

websocket服务端大报文发送连接自动断开分析

概述 当前springboot版本&#xff1a;2.7.4 使用依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dependency>现象概述&#xff1a; 客户端和服务端已经有心跳…

Collections工具类(java)

文章目录 7.1 常用方法 参考操作数组的工具类&#xff1a;Arrays&#xff0c;Collections 是一个操作 Set、List 和 Map 等集合的工具类。 7.1 常用方法 Collections 中提供了一系列静态的方法对集合元素进行排序、查询和修改等操作&#xff0c;还提供了对集合对象设置不可变、…

C++基础

目录 在Ubuntu 下编写CC简介C环境设置编写一个简单的C程序 C基础C的新特性C的输入输出方式C之命名空间namespaceC面向对象类和对象构造函数与析构函数this 指针 继承重载函数重载运算符重载 多态数据封装数据抽象接口&#xff08;抽象类&#xff09; 在Ubuntu 下编写C 在Ubunt…

“深入剖析JVM内部机制:探索Java虚拟机的运行原理“

标题&#xff1a;深入剖析JVM内部机制&#xff1a;探索Java虚拟机的运行原理 摘要&#xff1a;本文将深入探讨Java虚拟机&#xff08;JVM&#xff09;的内部机制&#xff0c;包括类加载、内存管理、垃圾回收、即时编译等关键概念和原理&#xff0c;帮助开发者更好地理解JVM的运…

k8s nginx+ingress 配置

1 nginx> ingress 配置&#xff1a; 2 nginx >service 配置 3 nginx pod配置&#xff1a; 4 nginx.conf 配置文件&#xff1a; # web端v1server{listen 30006;add_header Strict-Transport-Security "max-age31536000; includeSubDomains";#add_header Content…

Intellij IDEA运行报Command line is too long的解决办法

想哭&#xff0c;vue前端运行起来&#xff0c;对应的后端也得起服务。 后端出的这个bug&#xff0c;下面的博客写的第二种方法&#xff0c;完整截图是下面这个。 ​​​​​​​​​​​​​​​​​​​​Intellij IDEA运行报Command line is too long的解决办法 - 知乎 (zh…

实习周记第三周

第二周总结 第二周主要是做了一些PC端细节内容。大的地方改的不多&#xff0c;但是小的细节蛮多。 值得一提的是&#xff0c;第二周做的微信小程序&#xff0c;改了很多逻辑。改逻辑需要与后端进行联调&#xff0c;收获很大&#xff0c;思路也愈发清楚。 记录做了什么是好习…

【CSS】旋转中的视差效果

效果 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"/><meta http-equiv"X-UA-Compatible" content"IEedge"/><meta name"viewport" content"widthdevice-…