为VUE项目提供部署后仍可修改的配置文件- 前端开发

将配置文件放在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/'
}
1
2
3
4
5
6

二、引入配置文件

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>
1
2
3
4
5
6
7
8
9
10
11