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

Posted 左直拳

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为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/'

二、引入配置文件

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

以上是关于为VUE项目提供部署后仍可修改的配置文件的主要内容,如果未能解决你的问题,请参考以下文章

vue项目部署,网关服务配置文件修改

为啥元素从 DOM 中移除后仍可访问?

通过配置文件实现修改vue域名

vue项目部署方式:tomcat部署和nginx部署

vue cli3项目打包部署到tomcat服务器运行

vue项目打包部署生产环境