vue打包后怎么修改配置文件？vue打包以后修改配置参数

前言：我们经常项目中经常遇到一些场景，比如后端接口地址发生变更，前端重定向地址发生变化等场景，vue默认打包完一些配置文件咱们可能找不到，无法修改，只能重新打包 在这种情况下，动态可配置的配置文件就显得格外重要，今天小编就来说说关于vue打包后怎么修改配置文件vue打包以后修改配置参数?下面更多详细答案一起来看看吧!

vue打包后怎么修改配置文件vue打包以后修改配置参数

前言：我们经常项目中经常遇到一些场景，比如后端接口地址发生变更，前端重定向地址发生变化等场景，vue默认打包完一些配置文件咱们可能找不到，无法修改，只能重新打包 在这种情况下，动态可配置的配置文件就显得格外重要。

前端同学都知道vue目录结构，使用npm或者yarn打包后会生成一个dist文件

dist中有一个存放外部资源的static，它里面的文件是不会被打包编译的，

┌── build

├── config

├── node_modules

├── src

├── static

│ ├── config.js // 配置文件

│

├── index.html:

所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js文件的方式引入，

也就是将config.js引入到项目里的index.html中使用，然后就可以全局使用。

项目中使用到的文件大致有上图几个

1，首先在static中创建一个config.js文件

2，然后在创建的config.js配置文件中，声明一个对象Glob，将它赋值给window，对象名字随便取，只要不占用关键字即可，对象中存放你所需要配置的各种路径和数据，如下：

这里说明下，赋值给window，在vue里面获取不到window对象。所以不要赋值给window，直接定义个常量就好。

/*window.Glod = {

BaseUrl:"http://xxx.api.com", // 你的接口路径(这里是window对象)

.......

}

*/

window.api = {

apiURL: 'http://xxx.xxx.xxx.xxx:xxxx',

websocketURL: 'ws://xxx.xxx.xxx.xxx:xxxx/websocket'

}

3，将此配置文件在index.html 文件中引入

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

4.使用到这里相信会一点vue基础知识的同学都知道怎么在项目中使用我们配置的数据,比如我们要配置axios请求路径如下：

（这里是因为我配置了开发环境,而且在开发环境获取不到window.api，所以只有在打包后才好使）

const service = axios.create({

// baseURL: process.env.BASE_API, // api的base_url

baseURL: process.env.NODE_ENV === 'production' ? window.api.apiURL : process.env.BASE_API,

timeout: 20000

})

,