当前位置: 首页 > news >正文

以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"]

在Dockfile同级目录运行,注意最后的点号

npm build -t vuecli:v1.0 .

最后启动创建容器并启动

docker run -d --name vuepro -p 8080:8080 vuecli:v1.0

输入下面地址即可访问首页

http://ip地址:8080

相关文章:

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

因为之前一致出现的跨域问题,从而想到了这个办法,属于偏方。推荐使用nginx部署,再去解决跨域问题。 接下来聊一聊本文所使用的方法。 首先将你的前端vue项目拷贝一份到服务器,准备一个dockerfile文件,用这个进行部署首…...

docker容器监控:Cadvisor +Prometheus+Grafana的安装部署

目录 Cadvisor PrometheusGrafana的安装部署 一、安装docker: 1、安装docker-ce 2、阿里云镜像加速器 3、下载组件镜像 4、创建自定义网络 二、部署Cadvisor 1、被监控主机上部署Cadvisor容器 2、访问cAdvisor页面 三、安装prometheus 1、部署Prometheus…...

前端食堂技术周刊第 93 期:7 月登陆 Web 平台的新功能、Node.js 工具箱、Nuxt3 开发技巧、MF 重构方案

美味值:🌟🌟🌟🌟🌟 口味:橙橙冰萃美式 食堂技术周刊仓库地址:https://github.com/Geekhyt/weekly 大家好,我是童欧巴。欢迎来到前端食堂技术周刊,我们先来…...

获取 Android 的 SHA1 值

1、调试版,可以直接在 Android studio 中的 gradle 中查看。也可以用下面方法进行 前提要先确定签名文件所在的路径:调试版默认使用的签名文件是debug.keystore,文件处于 C 盘用户目录下的.android文件夹下。打开命令行工具, 1、…...

! [remote rejected] develop -> develop (pre-receive hook declined)

问题 git push 远程提交dao develop 分支失败,出现下面错误信息 remote: GitLab: You are not allowed to push code to protected branches on this project. To https://xxx.com.cn/xxx/xxx/xxx/xxx.git/! [remote rejected] develop -> develop (pre-receiv…...

最强的表格组件—AG Grid使用以及License Key Crack

PS: 想要官方 License Key翻到最后面 Ag Grid简介 Ag-Grid 是一个高级数据网格,适用于JavaScript/TypeScript应用程序,可以使用React、Angular和Vue等流行框架进行集成。它是一种功能强大、灵活且具有高度可定制性的表格解决方案,提供了丰富…...

【算法】逆波兰表达式

文章目录 定义求法代码思想: 定义 逆波兰表达式也称为“后缀表达式”,是将运算符写在操作数之后的运算式。 求法 *如:(ab)c-(ab)/e的转换过程: 先加上所有的括号。 (((ab)*c)-((ab)/e))将所有的运算符移到括号外面 (((ab) c)* …...

添加SQLCipher 到项目中

文章目录 一、克隆下载SQLCipher二、手动导入1. 生成sqlite3.c2. 在项目中添加命令3. 添加 Security.framework 三、CocoaPods导入 SQLCipher官方地址 一、克隆下载SQLCipher $ cd ~/Documents/code $ git clone https://github.com/sqlcipher/sqlcipher.git二、手动导入 1.…...

轻松预约,尽享美食,详解餐厅预约小程序的设计与实现

随着智能手机的普及和人们生活水平的提高,餐厅预约已经成为人们日常生活中的一部分。为了更好地满足人们的需求,许多餐厅开始使用小程序来提供更方便快捷的预约服务。本文将介绍如何制作一款餐厅预约小程序的详细步骤。 1. 进入乔拓云网后台,…...

数据结构--栈和队列3.1(栈-顺序结构)

目录 栈(Stack)栈顶(top)栈底(bottom)空栈(不含任何元素) 创建栈 入栈操作 出栈操作 销毁一个栈 计算栈的当前容量 实例分析 栈的插入操作叫做进栈(Push&#xf…...

pdf怎么压缩到1m?这样做压缩率高!

PDF是目前使用率比较高的一种文档格式,因为它具有很高的安全性,还易于传输等,但有时候当文件体积过大时,会给我们带来不便,这时候简单的解决方法就是将其压缩变小。 想要将PDF文件压缩到1M,也要根据具体的情…...

AttentionFreeTransformer 源码解析(一):AFTFull、AFTSimple、AFTLocal

我觉得源码写的很好懂,我就不加注释了,直接上计算流程图。 AFTFull class AFTFull(nn.Module):def __init__(self, max_seqlen, dim, hidden_dim64):super().__init__()max_seqlen: the maximum number of timesteps (sequence length) to be fed indim…...

C++ 计算 拟合优度R^2

解决的问题: 拟合优度(Goodness of Fit)是指回归直线对观测值的拟合程度,度量拟合优度的统计量是可决系数(亦称确定系数) R?。R最大值为 1。R%的值越接近1,说明回归直线对观测值的拟合程度越好,反之,R%值越小&#x…...

Springboot-Retrofit HTTP工具框架快速使用

在SpringBoot项目直接使用okhttp、httpClient或者RestTemplate发起HTTP请求,既繁琐又不方便统一管理。 因此,在这里推荐一个适用于SpringBoot项目的轻量级HTTP客户端框架retrofit-spring-boot-starter,使用非常简单方便,同时又提供…...

微信小程序实现人脸识别(从一个没有开通人脸核身的小程序跳转到要给开通人脸核身的小程序,进行人脸识别后再跳转回来)

A小程序没有开通人脸识别功能,B小程序开通了人脸识别。 总体思路是:从A小程序需要进行人脸识别的地方携带参数跳转到B小程序进行人脸识别,识别后把参数传递回来。 A小程序的参考代码如下: //人脸识别相关 start powerDrawerFace(e){var that = thisthat.setData({faceO…...

CSS-grid布局

网格布局也叫grid布局,平常写样式的时候基本上都是用的flex布局。 像以下布局,用flex布局就可能会有有点麻烦,这时候用grid布局就方便的多了。 或者是照片墙 grid布局就是将容器划分为行和列,产生单元格,然后在指定的…...

【JavaEE进阶】Bean 作用域和生命周期

文章目录 一. 关于Bean作用域的实例1. lombok2. 实例代码 二. 作用域定义1. Bean的六种作用域2. 设置作用域 三. Spring 执行流程和 Bean 的生命周期1. Spring 执行流程2. Bean生命周期 一. 关于Bean作用域的实例 注意在此例子中需要用到lombok 1. lombok lombok是什么? Lo…...

3分钟自建查分系统?现在每个人都可以实现了

学生成绩查询系统在现代教育管理中扮演着重要的角色,它不仅可以方便学生和家长查询成绩,也能帮助老师更好地管理和分析学生的学业表现。作为一名教师,了解如何制作学生成绩查询系统是提高教学效率和管理学生成绩便利性的关键。 在制作学生成…...

关于APP备案、小程序备案的问题,如何备案?

近日,工信部发布了关于开展移动互联网应用程序备案工作的通知。为落实相关法律法规要求,促进互联网行业规范健康发展,进一步做好移动互联网信息服务管理,现组织开展移动互联网应用程序(以下简称 APP)备案工…...

git上传代码后,如何清空历史日志以及文件操作,重新上传?以及上传代码

【Git教程】如何清除git仓库的所有提交记录,成为一个新的干净仓库  马三也算Github的忠实用户了,经常会把一些练手的项目传到Github上面进行备份。其中有一个名为ColaFramework的Unity框架项目,马三开发了一年多了,期间提交代码的…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端,它允许HTTP与Elasticsearch 集群通信,而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式,避免服务器受到各种恶意攻击和网络威胁,那么,服务器硬防通常都会应用在哪些场景当中呢? 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

12.找到字符串中所有字母异位词

🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...

深度学习水论文:mamba+图像增强

🧀当前视觉领域对高效长序列建模需求激增,对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模,以及动态计算优势,在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内,就有不…...

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析 在 Qt 事件处理中,return 语句的使用是另一个关键概念,它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别:不同层级的事件处理 方…...

Java 与 MySQL 性能优化:MySQL 慢 SQL 诊断与分析方法详解

文章目录 一、开启慢查询日志,定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...

C# winform教程(二)----checkbox

一、作用 提供一个用户选择或者不选的状态,这是一个可以多选的控件。 二、属性 其实功能大差不差,除了特殊的几个外,与button基本相同,所有说几个独有的 checkbox属性 名称内容含义appearance控件外观可以变成按钮形状checkali…...

数据库——redis

一、Redis 介绍 1. 概述 Redis(Remote Dictionary Server)是一个开源的、高性能的内存键值数据库系统,具有以下核心特点: 内存存储架构:数据主要存储在内存中,提供微秒级的读写响应 多数据结构支持&…...