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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目部署,网关服务配置文件修改相关的知识,希望对你有一定的参考价值。

参考技术A 1.在index.html同级文件夹下新建config.js:

  window.global_config = 

    BASE_URL: "http://baidu.com",  //服务地址,可打包后动态修改

  ;

2.在index.html加入:

  <script src="./config.js"></script>

3.在封装的公共请求如request.js里加入:

  service.interceptors.request.use(config => 

    config.url = window.global_config.BASE_URL+config.url;

  )

为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项目部署方式:tomcat部署和nginx部署

vue项目如何部署到服务器

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

超详细Docker部署SpringBoot+Vue项目(三更博客项目部署)

vue项目nginx和Tomcat下的部署

项目nginx部署时,前端用history模式,在浏览器浏览,页面空白