前后端多环境配置

wsuo

发布于 2021-01-05 14:54:58

5490

发布于 2021-01-05 14:54:58

文章被收录于专栏：技术进阶之路技术进阶之路

介绍一下前后端的多环境配置，前端使用的 Vue 框架，后端使用的是 SpringBoot 框架。

前端 Vue

这里以开发环境（dev）和生产环境（prod）为例。

首先在项目根目录下创建两个文件：

这是创建出来了两个不同的环境，内容如下：

.env.dev文件内容:

NODE_ENV=development
VUE_APP_SERVER=http://127.0.0.1:9000

--------------------------------------

.env.prod文件内容:

NODE_ENV=production
VUE_APP_SERVER=http://server.wsuo.top

然后在 package.json 中配置：

{
  "name": "admin",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve-dev": "vue-cli-service serve --mode dev",
    "serve-prod": "vue-cli-service serve --mode prod",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

这里配置的含义是：

serve-dev：执行命令 vue-cli-service serve --mode dev；
serve-prod：执行命令 vue-cli-service serve --mode prod；

他们会去寻找根目录下的 dev 文件和 prod 文件，然后读取配置。

后端 SpringBoot

SpringBoot 的多环境配置与 Vue 类似：

在 application.yml 后面加上一个后缀，表示环境名称。

我们以数据库连接为例，本地的配置和上线后部署到服务器上面的配置肯定不一样。

我们可以将变化的部分放到具体的配置文件中，比如在 application-dev.yml 中，配置如下：

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    type: com.alibaba.druid.pool.DruidDataSource
    url: jdbc:mysql://localhost:3306/online_course?characterEncoding=UTF8&useUnicode=false&serverTimezone=UTC
    username: root
    password: root
  redis:
    host: localhost
    port: 6379

在 application-prod.yml 中配置如下：

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    type: com.alibaba.druid.pool.DruidDataSource
    url: jdbc:mysql://10.30.100.255:3306/online_course?characterEncoding=UTF8&useUnicode=false&serverTimezone=UTC
    username: root
    password: 1234
  redis:
    host: 10.30.100.255
    port: 6379

配置好了，怎么分环境启动呢？

如果是在编辑器中调试，可以使用 IDEA 自带的工具配置：

选择要使用的启动模式：

如果是上线部署，我们可以使用 spring-boot-maven-plugin 插件将项目打成 jar 包。

然后使用命令执行时，加上参数即可：

java -jar aaa.jar --spring.profiles.active=dev

如果不会打包的可以使用 maven 工具的 install：

注意：

如果目标项目依赖子项目，需要先打包子项目；
如果是父子工程，可以直接打包父工程；
如果依赖中有 spring-boot-maven-plugin 插件的，该项目必须有主启动类才能成功打包；

打包之后可以在 target 目录下找到文件，执行命令接口运行。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-01-03 ，如有侵权请联系 cloudcommunity@tencent.com 删除

打包

maven

spring

vue.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度