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

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

接下来聊一聊本文所使用的方法。

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

java 复制代码
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信息

java 复制代码
# 使用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镜像,运行容器即可

相关推荐
并不会33 分钟前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
衣乌安、36 分钟前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜36 分钟前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师39 分钟前
CSS的三个重点
前端·css
耶啵奶膘2 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^4 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie4 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic5 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿5 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具5 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端