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

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

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

vue-cli3下將請求地址的配置文件分離出來以便于打包后可動態(tài)修改請求地址;
基本思路：
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中請求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);//存儲到vuex中
  resolve();
}).catch((error) => {
  console.log(error)
  reject()
})

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

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

}).$mount("#app")
}
init();
`
請求路徑就直接用$ajaxUrl就可以了。
只所以存儲到vuex中，是因為，如果你封裝了request請求，無法直接獲取到請求的地址，也無法用到全局$ajaxUrl，只能從vuex中獲取，如果沒有封裝，直接用$ajaxUrl就可以

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/99763.html

相關(guān)文章

基于webpack模仿vue-cli（簡略版）工程化

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

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

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

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

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

劉福 2019-07-25 14:37 評論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 評論0 收藏0
【骨架屏】【vue】如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏

摘要：如何在下搭建多模塊單模塊多路由骨架屏前言骨架屏的用戶感知比更好，此前看過很多專欄以及文章，此次實踐中還是遇到需要學(xué)習(xí)的部分。包括因為可能信息面不全，對插件源碼進行了詳細解讀，希望對于將要在項目中搭建骨架屏的小伙伴們有所幫助。如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏前言骨架屏的用戶感知比loading更好，此前看過很多專欄以及文章，此次實踐中還是...

huhud 2019-08-02 16:07 評論0 收藏0