1. Requirements:
The customer requires that the front-end and back-end codes be deployed on different servers. According to the different servers, the domain name can be switched to achieve the effect of switching interfaces. There is no need to change the server domain name and cause the front-end code to be packaged multiple times again.
2. Analysis:
Different servers: The first front-end code given to the user is the dist folder generated by the front-end running npm run build in vscode. Since there is no need to package the front-end code due to the change of the server domain name, there must be an independent dist folder after packaging. files to change different domain names according to different servers of users;
Different environments: Generally, a project has three environments (dev (development environment), fat ((test environment) (some called uat)) and production environment);
To understand the above two situations, you can read the instructions below.
3. Front-end framework used:
view2
4. Project file structure
5. Solution:
5.1. First, create a new config.js file in the public folder. This file needs to be introduced in the index.html file in the public folder and above the html to facilitate the priority execution of 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. Write the corresponding environment domain names in the three environment files in 4. Project file structure (replaced by test here)
5.2.1. In the .env.dev file
NODE_ENV = 'dev'
# base api
VUE_APP_BASE_URL = "http://test/api" // 开发环境5.2.2. In the .env.fat file
NODE_ENV = 'fat'
# base api
VUE_APP_BASE_URL = "http://test/api" // 测试环境5.2.3. In the .env.prod file
NODE_ENV = 'prod'
# base api
VUE_APP_BASE_URL = "http://test/api" // 生产环境6. In the setting.js file in the root directory
const baseApi = process.env.VUE_APP_BASE_URL // process.env是nodejs的顶层对象，可以在main.js内输出看一下7. Set the requested base path in the request file
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来决定的8. The front-end code should be requested through a proxy before deployment, so at this time, you need to comment out the proxy in the vue.config.vue file, and then re-npm run dev or serve the project.
8.1. If the proxy is commented out, won’t the request be cross-domain? Of course, it is cross-domain, so when back-end deployment is required, cross-domain is allowed.