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

左直拳

已于 2024-05-30 09:08:59 修改

阅读量2.9k

点赞数

分类专栏： vue 文章标签： vue.js 配置文件

于 2021-10-09 18:26:38 首次发布

本文链接：https://blog.csdn.net/leftfist/article/details/120676668

版权

vue 专栏收录该内容

57 篇文章

订阅专栏

=================================================

说明，本文提法有误，未能解决发布后修改配置生效问题。真正生效的，可以看这篇
《vue3项目发布后修改配置文件仍然生效》

=================================================
将配置文件放在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>