ruoyi前后端分离版,本地启动vue,连接云服务器后台服务修改配置过程


前言

使用ruoyi前后端分离版,本地只运行ruoyi-vue前端项目,后端代码包并不在本地启动,本文只做修改记录。

一、修改vue.config.js文件中target值

devServer: {
    host: '0.0.0.0',
    port: port,
    open: true,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        // target: `http://localhost:8080`, 注释掉默认配置,修改为如下ip配置
        target: `http://你远程服务器的ip(例如x.x.x.x):8080`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    disableHostCheck: true
  },

二、修改服务器nginx代理配置

	location /prod-api/ {
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://localhost:8080/; 这是原来的配置可以删除这行
			proxy_pass http://服务器的ip地址:8080/;
		}
 

总结

修改如上两处配置即可

### ruoyi-vue 本地启动教程 #### 准备工作 为了成功运行 ruoyi-vue 项目,需先准备好开发环境。确保已安装 Node.js 和 npm 或者 yarn 工具来管理前端依赖项[^2]。 #### 下载源码 前往 Gitee 平台获取官方仓库中的最新本代码。可以通过克隆 Git 仓库的方式下载整个项目的源码至本地计算机中。 #### 安装依赖包 进入解压后的 `ruoyi-vue` 文件夹内,打开命令提示符窗口执行如下指令以完成必要的 JavaScript 库和其他资源的加载: ```bash npm install ``` 或者如果使用的是 Yarn,则应输入: ```bash yarn install ``` 这一步骤会读取 package.json 中定义好的各项依赖关系,自动从互联网拉取对应的库文件保存到 node_modules 目录下以便后续编译构建时调用。 #### 启动应用服务 当所有的准备工作都完成后,可以利用下面这条简单的命令开启 Vue 开发服务器来进行实时预览和调试操作: ```bash npm run dev ``` 对于选择了 Yarn 的开发者来说则是要键入: ```bash yarn serve ``` 此时应该可以在浏览器里访问 http://localhost:8080 地址查看正在运行的应用界面了。请注意,默认情况下端口号可能是不同的,具体取决于配置情况以及是否有其他程序占用了该端口。 #### 构建生产静态页面 一旦确认应用程序能够正常运作之后,就可以考虑将其打包成适合上线发布的静态网页形式。为此只需简单地敲击以下任一命令即可实现目标: ```bash npm run build ``` 或是针对采用 Yarn 的场景而言, ```bash yarn build ``` 上述动作将会把最终产物放置于 dist/ 子目录之下等待进一步处理,比如上传至 CDN 或者集成进 Nginx 等 Web Server 当中去提供对外的服务支持[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

97年的程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值