前端根据不同服务器和不同环境去部署前端代码

最新推荐文章于 2024-04-23 16:26:38 发布

张嘉悦儿

最新推荐文章于 2024-04-23 16:26:38 发布

阅读量885

点赞数

文章标签：前端 vue Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_42234899/article/details/128673237

版权

1、需求：

客户要求前后端代码部署到不同服务器上，根据服务器的不同，切换域名，达到切换接口的效果，而不用因为更换服务器域名，导致前端代码再次多次打包。

2、分析：

不同服务器：首先给到用户的前端代码是前端在vscode运行npm run build产生的dist文件夹，既然不用因为服务器域名的更换而打包前端代码的话，那肯定是在打包后dist文件夹中有个独立的文件去根据用户的不同服务器更换不同域名；

不同环境：一般一个项目有三种环境（dev(开发环境)、fat（（测试环境）（有的叫uat））和生产环境）；

了解以上两种情况，即可阅读下方说明。

3、使用的前端框架：

4、项目文件结构

5、解决方法：

5.1、首先在public文件夹内新建一个config.js文件，此文件需要在public文件夹内的index.html文件内引入，且在html上面，便于优先html执行

config.js文件
// 说明:
// 服务器域名更改:  如服务器域名更改为http://test/api,则
// var Api_CONFIG = "http://test/api"

index.html
<!DOCTYPE html>
<html lang="cn">
  <head>
    <script src="./config.js"></script>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

5.2、在4、项目文件结构的三种环境文件内书写相应的环境域名（此处以test代替）

5.2.1、在.env.dev文件内

NODE_ENV = 'dev'

# base api

VUE_APP_BASE_URL = "http://test/api" // 开发环境

5.2.2、在.env.fat文件内

NODE_ENV = 'fat'

# base api

VUE_APP_BASE_URL = "http://test/api" // 测试环境

5.2.3、在.env.prod文件内

NODE_ENV = 'prod'

# base api

VUE_APP_BASE_URL = "http://test/api" // 生产环境

6、在根目录的setting.js文件内

const baseApi = process.env.VUE_APP_BASE_URL // process.env是nodejs的顶层对象，可以在main.js内输出看一下

7、在请求文件内设置请求的基准路径

import { baseApi } from "../../settings";
const API = window.Api_CONFIG || baseApi
axios.defaults.baseURL =  process.env.NODE_ENV === 'dev' ? baseApi : API,
解读：
    当window.Api_CONFIG有值的话，就等于API（window.Api_CONFIG是来源于config.js文件的用户填写的域名），或者就是setting.js文件内的baseApi，而baseApi是根据process.env（nodejs进程的环境）对象内的VUE_APP_BASE_URL值，而VUE_APP_BASE_URL的值是根据NODE_ENV是dev、fat、还是prod来决定的