vue项目webpack打包后修改配置文件

从webpack打包结构中我们知道，vue中有一个存放外部资源的文件夹static，它里面的文件是不会被打包编译的，所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js文件的方式引入，然后就可以全局使用。

具体的方法如下：

1.在项目中找到static文件夹，在里面创建一个配置文件，起名为config.js

┌── build

├── config

├── node_modules

├── src

├── static

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

│

├── index.html:

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

window.api = {

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

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

}

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>测试</title>

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

</head>

<body>

<div id="app"></div>

</body>

</html>

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

})

到此，项目的配置文件就已经设置好了，这样测试环境和正式环境的切换，或以后后台服务器要迁移和域名更换等，就可以直接在配置文件中修改，而不用重新打包部署。

需要注意一点，每次更改了配置文件，就需要重新进入一下项目，也就是重新刷新一下首页，让配置文件重新引入一次，这样修改才会生效。

巴特西

vue项目webpack打包后修改配置文件

最新文章

热门文章