vue3配置打包后的项目改配置文件后直接生效，解决每次修改配置需要重新打包的问题

HH287

已于 2023-02-16 21:05:19 修改

阅读量1.9k

点赞数 5

分类专栏：前端文章标签： javascript vue.js 前端 springboot

于 2023-02-16 21:03:10 首次发布

本文链接：https://blog.csdn.net/weixin_46951831/article/details/129069132

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

序言

背景：前后端分离项目，前端主要使用vue3开发完成后，通过 npm run build 打包后将生成的dist目录全部放入springboot项目的resources目录下，达到只启动后端服务完成系统正常访问；
项目主要版本

#前端
vue3版本：3.2.13
vue脚手架版本：vue/cli 5.0.8
#后端
jdk版本：1.8
springboot版本：2.5.9

整合后的项目结构：
在这里插入图片描述
前端vue项目结构(使用vuecli创建的项目)

1.public目录下创建globalProperties.js文件

//外部配置文件
let ExternalProfile = {};
ExternalProfile.baseUrl = 'http://localhost:9094'

2.创建assets/static/config.js 这个用来接收上面的外部配置文件可以自定义路径及名称

//接收外部配置文件的配置内容并导出到vue内部使用
let CONFIG = {};
CONFIG.baseUrl = ExternalProfile.baseUrl
export default CONFIG

3.在public目录下的index.html里面引用

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!--    <title><%= htmlWebpackPlugin.options.title %></title>-->
    <title>title</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- 在这里引用进来 -->
    <script type="text/javascript" src="<%= BASE_URL %>globalProperties.js"></script>
    <div id="app"></div>
  </body>
</html>

4.在vue里面使用，在 script 的标签下导入内部的config.js使用

<script>
    import CONFIG from "@/assets/static/config";

    export default {
        name: "Personal",
        data(){
            return{
                form:{},
                user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}.toString(),
                fromRouter:'',
                actionUrl:CONFIG.baseUrl+"/file/upload",
            }
        },
  		methods:{...}
    }
</script>

5.这样多加一层配置文件是为了不用去配置全局变量或者设置到浏览器缓存里面，主要以插件的形式方便在项目任意位置调用；如在axios拦截器里面调用；完整的axios拦截器如下：

import axios from 'axios'
import CONFIG from "../assets/static/config";
const request = axios.create({
    baseURL: CONFIG.baseUrl,
    timeout: 5000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
    let user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    if (user){
        config.headers['token'] = user.token;  // 设置请求头
    }

    return config
}, error => {
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)
export default request

6.验证

打包后放入后端目录

修改后端服务端口 application.yml

#配置服务端口
server:
  port: 9091

修改前端配置 globalProperties.js

//外部配置文件
let ExternalProfile = {};
ExternalProfile.baseUrl = 'http://localhost:9091'

启动服务访问 http://localhost:9091/assets/dist/index.html

7.补充

1.可以在springboot服务启动的时候先从容器环境变量中获取到服务端口及当前本地IP地址，拼接最终的访问基础地址，然后启动的时候先更新 globalProperties.js 文件中的内容；
2.如简单的获取本机IP和从环境变量中拿到服务端口如下：

//获取本机IP
String IP = Inet4Address.getLocalHost().getHostAddress();
//从环境变量获取服务端口(从配置文件中获取也行，防止没有配置server.port就从Environment里面获取)
@Autowired
Environment environment;
String Port = environment.getProperty("server.port");