vue项目通过外部配置文件读取接口地址- 在webpack-index.html模板中使用环境变量
概述：在index.html模板中判断当前环境，处于开发环境下时读取process环境变量、处于生产环境下时读取根目录配置文件（./config.js）,两种环境下将配置统一挂载到window全局变量上（SET_CONFIG）
config.js
window.SITE_CONFIG = {
appTitle: '系统测试',
version: '1.0.0',
apiURL: '',
websocketURL: '',
reportURL: ''
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<link rel="icon" href="<%= BASE_URL %>favicon.ico"/>
<title><%= VUE_APP_TITLE %></title>
<% if (process.env.NODE_ENV === 'production' ) { %>
<script type="text/javascript" src="config.js"></script>
<script>
document.title = window.SITE_CONFIG.appTitle
</script>
<% } %>
<!-- 其他环境读取环境变量-->
<% if (process.env.NODE_ENV !== 'production' ) { %>
<script>
window.SITE_CONFIG = {};
window.SITE_CONFIG['appTitle'] = '<%= process.env.VUE_APP_TITLE %>';
window.SITE_CONFIG['version'] = '<%= process.env.VUE_APP_VERSION %>';
window.SITE_CONFIG['apiURL'] = '<%= process.env.VUE_APP_API %>';
window.SITE_CONFIG['websocketURL'] = '<%= process.env.VUE_APP_API_WEBSOCKET %>'
window.SITE_CONFIG['VUE_APP_API_REPORT'] = '<%= process.env.VUE_APP_API_REPORT %>'
</script>
<% } %>
</head>
<body>
<noscript>
<strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
