您好,登錄后才能下訂單哦!
Vue中怎么切換生產(chǎn)和開發(fā)環(huán)境,針對這個問題,這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答,希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
一、生產(chǎn)環(huán)境,開發(fā)環(huán)境切換
開發(fā)環(huán)境:開發(fā)環(huán)境就是在 /config/index.js下配置proxyTable
生產(chǎn)環(huán)境:打包項目后代理就失效啦,所以再生產(chǎn)環(huán)境下要重新配置一下
參考:https://cli.vuejs.org/zh/guide/mode-and-env.html
第一步:通過創(chuàng)建不同環(huán)境js文件,再通過cross-env來切換
config dev.js prod.js dev.js module.exports = { BASE_URL: "https://test.365msmk.com" }; prod.js module.exports = { BASE_URL: "https://www.365msmk.com" };
第二步:安裝cross-env并在package.json中配置要傳遞的參數(shù)
安裝指令:npm install cross-env -D
package.json中配置
"scripts": { "serve": "cross-env BUILD_ENV=dev vue-cli-service serve", "build": "cross-env BUILD_ENV=prod vue-cli-service build" }
第三步:修改vue.config.js添加對webpack的配置
module.exports = { ..... chainWebpack: config => { config.plugin("define").tap(args => { args[0]['process.env'].BUILD_ENV = JSON.stringify(process.env.BUILD_ENV); return args; }); } };
在業(yè)務(wù)代碼做環(huán)境的切換
//讀取process.env常量對象中的BUILD_ENV const envType = process.env.BUILD_ENV; const urlObj = require(`../config/${envType}.js`); //創(chuàng)建一個axios實例 const service = axios.create({ baseURL: urlObj.BASE_URL + vipUrl });
1.全局過濾器
定義:
Vue.filter('過濾器名稱',function(a,b,c) { //.... return ... })
使用:
{{ num | 過濾器名稱(v1,v2) }}
2.局部過濾器
3.總結(jié):過濾器使用場景:用于將后臺數(shù)據(jù)處理成用戶最終顯示的數(shù)據(jù)格式
例如:性別,支付狀態(tài),物流狀態(tài),時間戳。。。。。。
moment官網(wǎng):momentjs.cn/docs/
安裝指令:npm i moment
格式: moment(時間戳).format("YYYY年MM月DD日,HH時mm分SS秒");
格式顯示:http://momentjs.cn/docs/#/displaying/
關(guān)于Vue中怎么切換生產(chǎn)和開發(fā)環(huán)境問題的解答就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。