将配置文件放在public/下(如果是vue2.,放在/static/下)*
前后端分离,前端代码码也像后端一样编译、发布,再也不是以前那种完完全全的静态文件了。这就为代码复用,模块式开发带来了便利,不过有一些问题。比如配置文件,发布时也会被编译、打包,部署之后就再也找不到,更别说修改了。只能在打包前设置好,这样就失去了配置的意义。
那应该如何提供配置文件,使得前端在部署后,仍然可以手动修改呢?
以vue3.*为例。很简单的,在public/下提供一个config.js,然后在public/index.html中引用该config.js即可(注意这是vue3,如果是vue2,则放在/static/)。因为public里的内容,系统认为是静态的,打包后,会放在根目录下。
一、配置文件
public/config.js
/*
本配置文件静态,不被编译,部署后可手动修改
*/
const staticConfig = {
arcgis_js_root: 'http://192.168.0.216:9080/javapubzy/arcgis_js_api/library/4.18/'
}
二、引入配置文件
public/index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<script src="/config.js"></script>
<script>
//使用配置。这个配置是全局性的,所有组件都能用
var ARCGIS_JS_API_ROOT = staticConfig.arcgis_js_root;
...
</script>
vue默认提供的项目是单页面应用(SPA),所有的代码,都以public/index.html为舞台,在vue框架的指挥下,你方唱罢我登场,热闹又有条不紊,屏蔽了各种控制的复杂性,对外提供了比传统多页面切换应用更平滑顺畅的用户体验。