为VUE项目提供部署后仍可修改的配置文件

素颜马尾好姑娘i 2022-09-15 05:45 177阅读 0赞

*将配置文件放在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框架的指挥下，你方唱罢我登场，热闹又有条不紊，屏蔽了各种控制的复杂性，对外提供了比传统多页面切换应用更平滑顺畅的用户体验。