從webpack打包結構中我們知道，vue中有一個存放外部資源的文件夾static，它裡面的文件是不會被打包編譯的，所以我們就可以利用外部引入js的方式將我們的想要的數據在index.html中以js文件的方式引入，然後就可以全局使用。 具體的方法如下： 1.在項目中找到static文件夾，在裡面創 ...
從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
})
到此，項目的配置文件就已經設置好了，這樣測試環境和正式環境的切換，或以後後臺伺服器要遷移和功能變數名稱更換等，就可以直接在配置文件中修改，而不用重新打包部署。
需要註意一點，每次更改了配置文件，就需要重新進入一下項目，也就是重新刷新一下首頁，讓配置文件重新引入一次，這樣修改才會生效。
