vue如何使用process.env搭建自定義運(yùn)行環(huán)境
一、vue-cli項(xiàng)目下默認(rèn)有三種模式
development
:在 vue-cli-service serve 時(shí)使用。production
:在 vue-cli-service build 和 vue-cli-service test:e2e 時(shí)使用。test
:在 vue-cli-service test:unit 時(shí)使用。
對(duì)應(yīng)的 process.env.NODE_ENV 值分別為 development、production、test。
二、可以通過環(huán)境文件來指定默認(rèn)環(huán)境變量和自定義環(huán)境變量
環(huán)境文件有一下幾個(gè)類型:
.env
: 在所有的環(huán)境中被載入.env.local
: 在所有的環(huán)境中被載入,但會(huì)被 git 忽略.env.[mode]
: 只在指定的模式中被載入.env.[mode].local
: 只在指定的模式中被載入,但會(huì)被 git 忽略
mode是某個(gè)模塊名,如 在src創(chuàng)建 .env.friend 文件,內(nèi)容:
NODE_ENV=development // 這里可以指定默認(rèn)的環(huán)境是 development、production、test。 VUE_APP_ENV=friend ?// 自定義的friend環(huán)境
注意自定義的變量名必須以 VUE_APP_ 開頭才能被webpack.DefinePlugin 靜態(tài)嵌入,通過process.env.VUE_APP_xxx 來訪問;執(zhí)行此文件就相當(dāng)于“進(jìn)入”friend環(huán)境了。
三、執(zhí)行自定義環(huán)境文件,進(jìn)入自定義環(huán)境
在package.json中添加
? "scripts": { ? ? "serve": "vue-cli-service serve", ? ? "build": "vue-cli-service build", ? ? "test:unit": "vue-cli-service test:unit", ? ? "test:e2e": "vue-cli-service test:e2e", ? ? "lint": "vue-cli-service lint", ? ? "serve:f":"vue-cli-service serve --mode friend", ? },
執(zhí)行 npm run serve:f,此時(shí)process.env.NODE_ENV為development, process.env.VUE_APP_ENV為friend,利用process.env.VUE_APP_ENV定義ip等信息即可,即可訪問后臺(tái)朋友的接口了。
四、配置舉例和應(yīng)用場(chǎng)景 vue-cli3
public/config/build.js,這里未使用自定義環(huán)境(未用process.env.VUE_APP_ENV)
let root = process.env.NODE_ENV; let build = { ? development: { ? ? //開發(fā)人員本地調(diào)試開發(fā)環(huán)境 ? ? publicPath:"/", ? ? outputDir:"xuzhou_shuiwu_web", ? }, ? production: { ? ? publicPath:"./", ? ? outputDir:"xuzhou_shuiwu_web", ? }, ? test: { ? }, ? // 公網(wǎng)環(huán)境 ? pro: { ? }, }; // export default build[root]; module.exports = build[root]
public/config/ip.js
// let root = process.env.NODE_ENV; let root = process.env.VUE_APP_ENV; // 自定義 let key = "/back";// 代理關(guān)鍵字 // 通用配置 let common = { ? key: key, ? host: "0.0.0.0", ? port: "8888", ? localhost: "0.0.0.0:8888", ? upload: key + "/file/uploadFile", // 文件上傳地址 } let ipConfig = { ? // 默認(rèn)環(huán)境 ? development: { ? ? serverIP: "http://1.1.1.1:8883/portal/", ? ? ? logoutIp: "http://1.1.1.1:8883/portal/cas/logout/", ? }, ? // 正式環(huán)境 ? production: { ? ? serverIP: "http://1.1.1.1:8082/portal/",? ? ? logoutIp: "http://1.1.1.1:8082/portal/cas/logout/", ? }, ? // 測(cè)試環(huán)境 ? test: { ? }, ? // 自定義環(huán)境 ? friend: { ? ? serverIP: "http://1.1.1.1:8881/portal/", ? ? logoutIp: "http://1.1.1.1:8881/portal/cas/logout/", ? }, }; // export default Object.assign(common,ipConfig[root]); console.log("當(dāng)前環(huán)境:",root) module.exports = Object.assign(common,ipConfig[root])
public/config/index.js
// import ip from "./ip" // import build from "./build" const config = { ? ? ip: require("./ip"), build: require("./build") }; // export default config; module.exports = config
vue.config.js
const config = require('./public/config'); const path = require("path"); function resolve(dir) { ? return path.join(__dirname, dir); } module.exports = { ? // publicPath: "./", //打包后的位置(如果不設(shè)置這個(gè)靜態(tài)資源會(huì)報(bào)404) ./ ? // vue-cli 3 已廢棄baseUrl ? publicPath: config.build.publicPath, ? outputDir: config.build.outputDir, //打包后的目錄名稱 ? assetsDir: "static", //靜態(tài)資源目錄名稱 ? devServer: { ? ? open: true,? ? ? // disableHostCheck: false, ? ? host: config.ip.host, ? ? port: config.ip.port, ? ? // https: false, ? ? // hotOnly: false, // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy ? ? proxy: { ? ? ? [config.ip.key]: { ? ? ? ? target: config.ip.serverIP, ?// jenkins ? ? ? ? changeOrigin: true, ? ? ? ? pathRewrite: { ? ? ? ? ? ["^" + config.ip.key]: "" ? ? ? ? } ? ? ? } ? ? } ? ? // before: app => {} ? }, // 第三方插件配置 ? // webpack相關(guān)配置 ? // chainWebpack: config => { ? // ? // config.entry.app = ['./src/main.js']; ? // ? config.resolve.alias.set("@", resolve("src")).set("#", resolve("public")); ? // }, ? // webpack3,4的寫法 ? configureWebpack: { ? ? resolve: { ? ? ? extensions: ['.js', '.vue', '.json'], ? ? ? alias: { ? ? ? ? '@': resolve('src'), ? ? ? ? // '~': process.cwd(), ? ? ? ? '#': resolve('public'), ? ? ? ? // components: resolve('src/components'), ? ? ? ? // util: resolve('src/utils'), ? ? ? ? // store: resolve('src/store'), ? ? ? ? // router: resolve('src/router') ? ? ? } ? ? } ? }, ? // pluginOptions: { ? // ? ? // ... ? // }, ? // 加載less加載器,路徑:./public/css/common.less ? chainWebpack: config => { ? ? const oneOfsMap = config.module.rule("less").oneOfs.store; ? ? oneOfsMap.forEach(item => { ? ? ? item ? ? ? ? .use("sass-resources-loader") ? ? ? ? .loader("sass-resources-loader") ? ? ? ? .options({ ? ? ? ? ? // Provide path to the file with resources ? ? ? ? ? resources: ["./public/css/common.less", "./public/css/variable.less"] ? ? ? ? }) ? ? ? ? .end(); ? ? }); ? } };
axure封裝request.js 部分
const service = axios.create({ ? baseURL: require("#/config").ip.key, ? timeout: 5000, // request timeout ? withCredentials: true, });
在單點(diǎn)登錄中,可以在router.js中判斷無權(quán)限跳轉(zhuǎn)時(shí)使用:
location.href = config.serverIP + “cas/login?redirect=” + url
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue的el-select綁定的值無法選中el-option問題及解決
這篇文章主要介紹了vue的el-select綁定的值無法選中el-option問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09vue3?使用?vue3-video-play實(shí)現(xiàn)在線視頻播放
這篇文章主要介紹了vue3?使用?vue3-video-play?進(jìn)行在線視頻播放,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06vue3中Fragment特性的一個(gè)bug需要注意事項(xiàng)
這篇文章主要介紹了vue3中Fragment特性的一個(gè)bug,需要留意的注意事項(xiàng)示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01vue-element-admin 菜單標(biāo)簽失效的解決方式
今天小編就為大家分享一篇vue-element-admin 菜單標(biāo)簽失效的解決方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11手把手帶你使用vue+node作后端連接數(shù)據(jù)庫(kù)
為了快速學(xué)習(xí)nodejs制作后端并和數(shù)據(jù)庫(kù)進(jìn)行交互的方法,所以趕緊寫一篇這樣的文章出來,下面這篇文章主要給大家介紹了關(guān)于手把手帶你使用vue+node作后端連接數(shù)據(jù)庫(kù)的相關(guān)資料,需要的朋友可以參考下2023-03-03解決Vue3?echarts?v-show無法重新渲染的問題
這篇文章主要介紹了Vue3?echarts?v-show無法重新渲染的問題,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09Vue.js路由實(shí)現(xiàn)選項(xiàng)卡簡(jiǎn)單實(shí)例
這篇文章主要為大家詳細(xì)介紹了Vue.js路由實(shí)現(xiàn)選項(xiàng)卡簡(jiǎn)單實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07