Vue 打包后，如果想修改整體的后台接口域名，或者圖片文件的路徑，就需要在源代碼中修改后，再次進行build打包。這樣很不靈活，先看一下vue打包后的文件結構，項目打包后會生成一個dist文件
── dist ├── static // 外部靜態資源文件夾，對應項目中的static文件夾 ，與index.html同級 └── index.html // 項目入口主文件
從上面的打包文件解構中我們知道，vue中有一個存放外部資源的文件夾static，它里面的文件是不會被打包編譯的，所以我們就可以利用外部引入js的方式將我們的想要的數據在index.html中以js文件的方式引入，然后就可以全局使用。
具體的方法如下：
1.在項目中找到static文件夾，在里面創建一個配置文件，起名為config.js
如果不清楚項目結構的可以看一下前面我寫的Vue項目目錄結構說明與配置
┌── build ├── config ├── node_modules ├── src ├── static │ ├── config.js // 配置文件 │ ├── index.html:
2.然后在創建的config.js配置文件中，聲明一個對象Glob，將它賦值給window，對象名字隨便取，只要不占用關鍵字即可，對象中存放你所需要配置的各種路徑和數據，如下：
這里說明下，賦值給window，在vue里面獲取不到window對象。所以不要賦值給window，直接定義個常量就好。
/*window.Glod = { BaseUrl:"http://xxx.api.com", // 你的接口路徑(正式) //BaseUrl:"http://xxx.apiTest.com", // 你的接口路徑(測試) appkey:"", token:"" ....... } */ const Glod = { BaseUrl:"http://xxx.api.com", // 你的接口路徑(正式) //BaseUrl:"http://xxx.apiTest.com", // 你的接口路徑(測試) appkey:"", token:"" ....... }
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.使用。到這里相信會一點js基礎知識的同學都知道怎么在項目中使用我們配置的數據，沒錯就是 Glob,比如我們要配置axios請求路徑如下：不清楚怎么配置的同學可以看一下前面我寫的vue axios請求 配置
axios 配置文件
import axios from 'axios' .... let baseURL // 判斷開發環境（一般用於本地代理） if (process.env.NODE_ENV === 'development') { // 開發環境 baseURL = '/api' } else { // 編譯環境 if (process.env.type === 'test') { // 測試環境 baseURL = Glob.BaseUrl // 在這里使用配置文件中的域名 } else { // 正式環境 baseURL = Glob.BaseUrl // 在這里使用配置文件中的域名 } } const Axios = axios.create({ baseURL:baseURL , timeout: 60000, responseType: "json", withCredentials: false }); .....
到此，項目的配置文件就已經設置好了，這樣測試環境 和 正式環境的切換，或以后公司的后台服務器要遷移 和 域名更換等，就可以直接在配置文件中修改，而不用重新打包部署。
需要注意一點，每次更改了配置文件，就需要重新進入一下項目，也就是重新刷新一下首頁，讓配置文件重新引入一次，覆蓋掉原有的 Glob 對象，這樣修改才會生效。
方案二：https://blog.csdn.net/qq_42240091/article/details/96431677
vue項目打包后生成一個配置文件可以修改打包后的服務器api地址
問題描述：vue項目打包上線之后，如果要改服務器api地址，只能在源碼更改然后重新打包發布，為了解決這個問題，我們可以在static增加一個config.json文件，然后打包的時候它不會被打包，從而在里面修改服務器地址，這樣就不用在源碼更改。
我覺得這是最簡單的辦法，不用修改build里面webpack.prod.conf配置文件
1.在static創建config.json文件
以上是需要更改的三個文件
//服務器ip地址
{"ApiUrl":"http://192.168.0.158"}
2.在main.js加入以下代碼
//要引入axios才能用 //注意獲取config.json的地址 axios.get("./../static/config.json").then((result)=>{ console.log(result) //存到localStorage里面，方便在其他頁面獲取 localStorage.setItem('ApiUrl',result.data.ApiUrl); console.log(localStorage.getItem('ApiUrl')); //也可以聲明成全局變量,在其他頁面用this.ApiUrl獲取 // Vue.prototype.ApiUrl=result.data.ApiUrl }).catch((error)=>{console.log(error)});
3.在你存放接口的文檔api.js獲取
console.log(localStorage.getItem('ApiUrl')) const APIV1 = localStorage.getItem('ApiUrl')+'/api/v1'
或者是在你封裝get/post方法的地方直接獲取地址
//getapi為自己封裝的獲取api.js里面的接口地址 url: localStorage.getItem('ApiUrl')+getapi(url),
4.運行npm run build，打包好的dist里面的static里面會新增一個config.json文件（這就是我們想要的修改服務器api地址的入口）
5.測試：安裝http-server或者anywhere 搭建web服務器環境(建議使用anywhere)
npm install anywhere -g
在dist打開命令行 輸入anywhere，瀏覽器會自己打開，那么你打包好的項目就相當於在服務器上運行了，這時你再修改config.json里面的地址，刷新網頁，你會發現地址已經更改為你剛改的地址了。
方案三：https://blog.csdn.net/qq_31173561/article/details/90672070