当前位置: 首页 > 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框架项目,马三开发了一年多了,期间提交代码的…...

DS4Windows终极指南:免费让PlayStation手柄在Windows电脑上完美运行

DS4Windows终极指南:免费让PlayStation手柄在Windows电脑上完美运行 【免费下载链接】DS4Windows Like those other ds4tools, but sexier 项目地址: https://gitcode.com/gh_mirrors/ds/DS4Windows 你是否曾经为Windows游戏无法识别你的PlayStation手柄而烦…...

FPGA调试效率翻倍:把VIO IP核当成你的交互式‘信号开关’与‘仪表盘’

FPGA调试效率革命:用VIO构建硬件工程师的交互式仪表盘 在FPGA开发的世界里,调试环节往往占据项目周期的60%以上时间。传统调试方式如同在黑暗房间摸索开关,每次修改测试激励都需要经历漫长的综合-实现-下载循环。而VIO(Virtual In…...

全球困于孤岛与慢仿真,中国镜像视界以可执行元神实现代差领跑

全球困于孤岛与慢仿真,中国镜像视界以可执行元神实现代差领跑当前全球数字孪生产业普遍陷入两大瓶颈:数据孤岛林立、多系统无法互通,以及仿真滞后、虚实不同步、只能展示不能执行,绝大多数方案仍停留在 “可视化孪生” 的初级阶段…...

AI智能体开发框架agent-pack-n-go:开箱即用的快速构建与部署指南

1. 项目概述:一个开箱即用的智能体开发与部署框架最近在探索AI智能体(Agent)的落地应用时,发现了一个痛点:从构思一个智能体到真正把它跑起来,中间隔着“十万八千里”。你需要考虑框架选型、环境配置、工具…...

急急急急急急急急哦吼吼吼叫

测试22333333...

把ESP32变成SPI从机:用HSPI模拟传感器,与树莓派/STM32通信的配置指南

将ESP32配置为SPI从机:与树莓派/STM32通信的实战指南 在物联网和嵌入式系统开发中,多设备间的可靠通信一直是开发者面临的核心挑战。ESP32作为一款功能强大的Wi-Fi/蓝牙双模芯片,其SPI从机模式常被忽视,却能为系统架构带来意想不到…...

从电路图到C代码:单片机P1口矩阵键盘扫描最直白的保姆级推导(附Proteus仿真)

从电路图到C代码:单片机P1口矩阵键盘扫描最直白的保姆级推导(附Proteus仿真) 第一次接触单片机矩阵键盘时,看着电路图上那些纵横交错的线条变成代码里的位操作,总有种"魔法"般的困惑。为什么P1口要这样配置&…...

免费获取VMware Workstation Pro 17许可证密钥:5步激活完整指南

免费获取VMware Workstation Pro 17许可证密钥:5步激活完整指南 【免费下载链接】VMware-Workstation-Pro-17-Licence-Keys Free VMware Workstation Pro 17 full license keys. Weve meticulously organized thousands of keys, catering to all major versions of…...

Facebook三不限账户, 普通户比不了的宽松政策

对于跨境投手、出海企业而言,选对Facebook广告账户类型,是投放成功的第一步。2026年风控持续收紧,不同账户类型的权限、稳定性、适用场景差异显著,很多新手因混淆账户类型、选错渠道,导致开户失败、账户被封或投放受限…...

手把手教你用LongCat-Image-Editn:无需代码,在星图平台快速搭建个人AI修图站

手把手教你用LongCat-Image-Editn:无需代码,在星图平台快速搭建个人AI修图站 1. 为什么选择LongCat-Image-Editn 1.1 普通人也能用的AI修图神器 想象一下:你有一张完美的照片,但想换个背景;或者产品图需要更新&…...