当前位置: 首页 > 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

http://www.lryc.cn/news/118720.html

相关文章:

  • docker容器监控:Cadvisor +Prometheus+Grafana的安装部署
  • 前端食堂技术周刊第 93 期:7 月登陆 Web 平台的新功能、Node.js 工具箱、Nuxt3 开发技巧、MF 重构方案
  • 获取 Android 的 SHA1 值
  • ! [remote rejected] develop -> develop (pre-receive hook declined)
  • 最强的表格组件—AG Grid使用以及License Key Crack
  • 【算法】逆波兰表达式
  • 添加SQLCipher 到项目中
  • 轻松预约,尽享美食,详解餐厅预约小程序的设计与实现
  • 数据结构--栈和队列3.1(栈-顺序结构)
  • pdf怎么压缩到1m?这样做压缩率高!
  • AttentionFreeTransformer 源码解析(一):AFTFull、AFTSimple、AFTLocal
  • C++ 计算 拟合优度R^2
  • Springboot-Retrofit HTTP工具框架快速使用
  • 微信小程序实现人脸识别(从一个没有开通人脸核身的小程序跳转到要给开通人脸核身的小程序,进行人脸识别后再跳转回来)
  • CSS-grid布局
  • 【JavaEE进阶】Bean 作用域和生命周期
  • 3分钟自建查分系统?现在每个人都可以实现了
  • 关于APP备案、小程序备案的问题,如何备案?
  • git上传代码后,如何清空历史日志以及文件操作,重新上传?以及上传代码
  • 超导热催生meme,换汤不换药的投机轮回
  • 【HashMap】 73. 矩阵置零
  • Vue-2.nodejs的介绍和安装
  • 分别用Vue和Java来实现的风靡一时的2048 游戏
  • echarts甘特图 一个值多条线
  • 多态性说明
  • 2023-08-04 LeetCode每日一题(不同路径 III)
  • 腾讯云服务器地域怎么选?可用区是什么?
  • 第一百二十三天学习记录:C++提高:STL-vector容器(下)(黑马教学视频)
  • 谈谈Spring与字节码生成技术
  • Java数组详解 -- 基础知识与常用操作