vue-cli3打包后分離配置文件

jonh_felix 發(fā)布于2019-08-23 13:54 / 1256人閱讀

摘要：下將請(qǐng)求地址的配置文件分離出來(lái)以便于打包后可動(dòng)態(tài)修改請(qǐng)求地址基本思路在文件下新建在中請(qǐng)求文件，設(shè)置全局存儲(chǔ)到中請(qǐng)求路徑就直接用就可以了。

vue-cli3下將請(qǐng)求地址的配置文件分離出來(lái)以便于打包后可動(dòng)態(tài)修改請(qǐng)求地址;
基本思路：
1.在public文件下新建serverConfig.json
`{
"production":"https://www.easy-mock.com/mock/5bd2d48f3e503e20f0011196/testUrl",
"develop":"https://www.easy-mock.com/mock/5bd2d48f3e503e20f0011196/testUrl"
}`;
2.在main.js中請(qǐng)求serverConfig.json文件，
`function getServerConfig () {
return new Promise ((resolve, reject) => {

axios.get("./serverConfig.json").then((result) => {
  let config = result.data;
  let ajaxUrl = process.env.NODE_ENV == "production" ? config.production:config.develop;
  Vue.prototype.$ajaxUrl=ajaxUrl; //設(shè)置全局
  store.commit("setAjaxUrl",ajaxUrl);//存儲(chǔ)到vuex中
  resolve();
}).catch((error) => {
  console.log(error)
  reject()
})

})
}
async function init() {
await getServerConfig();
new Vue({

router,
store,
render: h => h(App),

}).$mount("#app")
}
init();
`
請(qǐng)求路徑就直接用$ajaxUrl就可以了。
只所以存儲(chǔ)到vuex中，是因?yàn)椋绻惴庋b了request請(qǐng)求，無(wú)法直接獲取到請(qǐng)求的地址，也無(wú)法用到全局$ajaxUrl，只能從vuex中獲取，如果沒(méi)有封裝，直接用$ajaxUrl就可以

GPU云服務(wù)器云服務(wù)器 vue-cli3 為什么 android打包后 redis讀寫(xiě)分離配置 php文件讀寫(xiě)分離

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99763.html

相關(guān)文章

基于webpack模仿vue-cli（簡(jiǎn)略版）工程化

摘要：但高度封裝的帶來(lái)方便的同時(shí)，很多人卻很少去關(guān)注輪子的內(nèi)部結(jié)構(gòu)，以至于當(dāng)使用需要手動(dòng)配置一些東西如編譯實(shí)現(xiàn)代碼壓縮，移動(dòng)端適配等配置的時(shí)候往往無(wú)從下手。廢話不多說(shuō)，下面我們來(lái)看看如何基于模仿實(shí)現(xiàn)項(xiàng)目工程化。從零搭建vue-cli 原創(chuàng)不易，如需轉(zhuǎn)載請(qǐng)聯(lián)系作者并注明出處 vue-cli的出現(xiàn)為vue工程化前端開(kāi)發(fā)工作流提供了開(kāi)箱即用的構(gòu)建配置，減輕了煩人的webpack配置流程。但高度封...

GitCafe 2019-08-26 11:35 評(píng)論0 收藏0
vue-cli#4.7項(xiàng)目結(jié)構(gòu)分析

摘要：前言使用過(guò)進(jìn)行項(xiàng)目開(kāi)發(fā)的同學(xué)，一定知道或者使用過(guò)腳手架，他能夠很好的搭建項(xiàng)目結(jié)構(gòu)和工程，讓我們能夠把足夠的精力放在業(yè)務(wù)開(kāi)發(fā)上。對(duì)象提供一系列屬性，用于返回系統(tǒng)信息返回當(dāng)前進(jìn)程的命令行參數(shù)數(shù)組。前言使用過(guò) vue 進(jìn)行項(xiàng)目開(kāi)發(fā)的同學(xué)，一定知道或者使用過(guò) vue-cli 腳手架，他能夠很好的搭建項(xiàng)目結(jié)構(gòu)和工程，讓我們能夠把足夠的精力放在業(yè)務(wù)開(kāi)發(fā)上。也正是因?yàn)檫@樣，很多時(shí)候我們會(huì)因?yàn)轫?xiàng)目...

EastWoodYang 2019-08-22 17:09 評(píng)論0 收藏0
ONE-sys 整合前后端腳手架 koa2 + pm2 + vue-cli3.0 + element

摘要：項(xiàng)目地址干貨求本腳手架主要致力于前端工程師的快速開(kāi)發(fā)一鍵部署等快捷開(kāi)發(fā)框架，主要目的是想讓前端工程師在一個(gè)阿里云服務(wù)器上可以快速開(kāi)發(fā)部署自己的項(xiàng)目。項(xiàng)目地址https://github.com/fanshyiis/... 干貨！求star showImg(https://segmentfault.com/img/remote/1460000017886870); 本腳手架主要致力于...

劉福 2019-07-25 14:37 評(píng)論0 收藏0
vue-cli中配置webpack系列文章七 ------ webpack.prod.conf.js

webpack.prod.conf.js var path = require(path) var utils = require(./utils) var webpack = require(webpack) var config = require(../config) var merge = require(webpack-merge) var baseWebpack...

ShowerSun 2019-08-26 13:51 評(píng)論0 收藏0
【骨架屏】【vue】如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏

摘要：如何在下搭建多模塊單模塊多路由骨架屏前言骨架屏的用戶感知比更好，此前看過(guò)很多專欄以及文章，此次實(shí)踐中還是遇到需要學(xué)習(xí)的部分。包括因?yàn)榭赡苄畔⒚娌蝗?，?duì)插件源碼進(jìn)行了詳細(xì)解讀，希望對(duì)于將要在項(xiàng)目中搭建骨架屏的小伙伴們有所幫助。如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏前言骨架屏的用戶感知比loading更好，此前看過(guò)很多專欄以及文章，此次實(shí)踐中還是...

huhud 2019-08-02 16:07 評(píng)論0 收藏0