1. 程式人生 > >webpack+vue打包之後輸出配置檔案修改介面檔案

webpack+vue打包之後輸出配置檔案修改介面檔案

用vue-cli構建的專案通常是採用前後端分離的開發模式,也就是前端與後臺完全分離,此時就需要將後臺介面地址打包進專案中,but,難道我們只是改個介面地址也要重新打包嗎?當然不行了,那就太麻煩了,怎麼解決呢?其實方法很多,接下來我推薦一種最便捷的方法,也是最容易操作的方法。

1.首先我們在static檔案下建立一個js檔案,就叫config.js吧,內容為

window.g = {
  AXIOS_TIMEOUT: 10000,
  ApiUrl: 'http://localhost:21021/api/services/app', // 配置伺服器地址,
  ParentPage: {
    CrossDomainProxyUrl: '/Home/CrossDomainProxy'
, BtnsApi: '/api/services/app/Authorization/GetBtns', OrgsApi: '/api/services/app/authorization/GetOrgsByUserId' }, }

2.接下來我們只需要在index.html這個入口檔案裡引入該檔案(注意路徑就ok)

<script type="text/javascript" src="/static/config.js"></script>

3.然後你就可以在你需要的地方隨意獲取就行了,比如

var baseURLStr = window.g.ApiUrl
// 建立axios例項
const service = axios.create({
  baseURL: baseURLStr, // api
base_url
timeout: 5000 // 請求超時時間 })

4.最後在打包成功之後,config,js檔案不會被打包,依然存在static資料夾下,如果需要修改只需要用記事本開啟檔案修改地址就OK了,而且該方法也不會影響開發模式,是不是很簡單有效呢,快去嘗試一下吧

相關推薦

webpack+vue打包之後輸出配置檔案修改介面檔案

用vue-cli構建的專案通常是採用前後端分離的開發模式,也就是前端與後臺完全分離,此時就需要將後臺介面地址打包進專案中,but,難道我們只是改個介面地址也要重新打包嗎?當然不行了,那就太麻煩了,怎麼解決呢?其實方法很多,接下來我推薦一種最便捷的方法,也是最容易操作的方法。1

webpack 打包vue專案後生成一個可修改介面地址的配置檔案

當我們做完vue專案打包、轉測試、部署後,卻遇到修改介面地址,或修改域名。但是在npm run build 之後所生成的 dist 檔案也是寫死的了。我們就需要回來重新修改,重新打包。 no no no 一想都覺得麻煩哎。 所以最好解決方案就是有個 config 檔案方便我們管理這些。 解決

vue打包之後生成一個配置檔案修改介面的方法

前言: 我們的vue程式碼打包上傳到伺服器之後,要是資料介面 以後換了域名什麼的,是不是需要重新去vue檔案裡修改介面。 能不能生成一個配置檔案,裡面可以配置域名或其它什麼欄位之類的,這樣以後換了域名,只需開啟記事本 修改一下域名即可。 教程: 第一步:安裝generate-

vue打包之後生成一個配置文件修改接口

on() back 保存 分享 pro sessions onf proto all 前言: 我們的vue代碼打包上傳到服務器之後, 要是數據接口 以後換了域名什麽的,是不是需要重新去vue文件裏修改接口。 能不能生成一個配置文件,裏面可以配置域名或其它什麽字段之類的,這樣

怎樣通過已經使用過webpack+vue+vueRouter+vuecli的配置文件package.json創建一個項目

relative route ued orm outer 手動 include ons sta 首先,我們自己得手動創建一個webpack+vue+vueRouter+vuecli工程,執行下面:如:新建一個vue項目,創建一個基於"webpack"的項目,項目名為vued

webpack+vue-cli中代理配置(proxyTable)

info ubd 技術 ets conf local src nod mage 在做vue的項目時,用到webpack打包工具,我們會發現本地開發開啟的node服務地址請求接口的地址存在跨域問題。本地開啟的服務地址是 http://localhost:8080 而服務器

webpack vue 打包優化

webpack vue 打包優化 問題描述 在專案優化中,有一種方案,不經常更新的第三方包可以不打在 vendor.js 中,可以在 .html 模板中引入,然後在 webpack 中配置排除這些包,但是會遇到一個問題,就是開發環境中,如果排除掉 vue.js 不打入 v

vue打包之後靜態資源訪問不到

首先 確定問題描述:在專案開發中,當我們通過npm run build打包之後將檔案放在伺服器上時通常會出現圖片失效問題,控制檯中提示某個圖片沒有找到(404錯誤),這些圖片可以是以src引入的圖片, 也可以是css中定義的背景圖片。圖片能否顯示與你的靜態資原始檔存在位置和引

vue打包之後的專案執行

vue-cli專案最後總是不可避免進行打包操作,但是打包之後如何執行?,可以藉助下面node程式碼執行以及建立介面代理: var express=require("express"); //專案的一個配置檔案,在這裡主要用來獲取生產環境的埠號 var config=req

maven的安裝、路徑配置修改檔案路徑和eclipse中的配置、建立maven工程。

maven的安裝、路徑配置、修改庫檔案路徑與在eclipse中的配置一、maven的安裝解壓apache-maven-3.3.9-bin.zip到自己的資料夾下,解壓後路徑如:D:\Program\apache-maven-3.3.9。二、路徑配置右鍵“計算機”,選擇“屬性”

webpack+vue搭建後續,生成html,css檔案剝離,清除多餘檔案

1、安裝html-webpack-plugin cnpm install --save-dev html-webpack-plugin 將原來的index.html改成index.tmpl.html,並移除裡面的script標籤。 webpack.config.js

Oracle 表空間增加資料檔案 修改資料檔案容量上限

查詢已存在表空間資訊 col "表空間名" for a20 col "資料檔案全路徑" for a50 set linesize 150 set pagesize 1000 select f.ta

vue在js中配置全域性API介面

開發十年,就只剩下這套架構體系了! >>>   

使用Mybatis生成工具自動生成實體類和對應的mapper對映檔案以及介面檔案

1.相關的jar包 Mybatis-Generator的下載可以到這個地址: https://github.com/mybatis/generator/releases 使用官方網站的mapper自動生成工具mybatis-generator-core-1

vue中用webpack打包之後執行檔案問題以及相關配置

1.vue中的vue-cli打包 最近在用vue寫一個小專案,其中就用到了vue腳手架工具vue-cli,在測試打包後能否執行過程中遇到不少問題,而且在網上這些問題答案都不太好找,廢話不多說,進入正題

16.如何做到webpack打包vue項目後,可以修改配置文件

r.js all config rest 技術分享 req api local err 問題描述: 前端需要修改restful API的url,但是打包之後,配置文件找不到了,如果在npm run build 生成dist後,這個配置也被寫死了,傳到運行的前端服務器上後,假

webpack打包vue專案之後生成的dist檔案該怎麼啟動執行

親測,webpack打包vue專案之後生成的dist檔案可以部署到 express 伺服器上執行。 我的vue專案結構如下: 1. 進入該vue專案目錄,開啟git bash,執行:npm run build(在package.json的scripts配置) 執行成功

maven打包的時候,如何修改pom.xml配置檔案

一、背景  現在我們大部分的專案都是基於maven來進行構建的,比如現在主流的Spring boot專案,全程都是基於maven進行搭建,那麼我們在對maven專案開發完成之後,準備上線需要對專案進行打包的時候,有時候經常遇到主函式找不到?或者是開發環境的和測試環境的配置檔

webpack打包vue專案之後怎麼啟動&注意事項

前端程式碼沒有伺服器可以部署到 express 伺服器上執行 1.執行:npm run build 打包後生成dist資料夾 2. 安裝express-generator生成器 執行  $ npm install express-generator -g  進行安

vue專案打包之後js檔案過大怎麼辦?

話不多說直接上圖 優化前: 優化後: 第一張圖中的 1.09 M是我的專案經過打包編譯之後的js檔案大小,確實有點大了,第一次開啟頁面的時候會比較慢。所以就需要想辦法來解決這個問題了。 再檢視官網之後,發現官網給我們提供了一個懶載入,相當於圖片懶