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)用場景 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/",
? },
? // 測試環(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 = configvue.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-09
vue3?使用?vue3-video-play實(shí)現(xiàn)在線視頻播放
這篇文章主要介紹了vue3?使用?vue3-video-play?進(jìn)行在線視頻播放,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06
vue3中Fragment特性的一個(gè)bug需要注意事項(xiàng)
這篇文章主要介紹了vue3中Fragment特性的一個(gè)bug,需要留意的注意事項(xiàng)示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01
vue-element-admin 菜單標(biāo)簽失效的解決方式
今天小編就為大家分享一篇vue-element-admin 菜單標(biāo)簽失效的解決方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
手把手帶你使用vue+node作后端連接數(shù)據(jù)庫
為了快速學(xué)習(xí)nodejs制作后端并和數(shù)據(jù)庫進(jìn)行交互的方法,所以趕緊寫一篇這樣的文章出來,下面這篇文章主要給大家介紹了關(guān)于手把手帶你使用vue+node作后端連接數(shù)據(jù)庫的相關(guān)資料,需要的朋友可以參考下2023-03-03
解決Vue3?echarts?v-show無法重新渲染的問題
這篇文章主要介紹了Vue3?echarts?v-show無法重新渲染的問題,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
Vue.js路由實(shí)現(xiàn)選項(xiàng)卡簡單實(shí)例
這篇文章主要為大家詳細(xì)介紹了Vue.js路由實(shí)現(xiàn)選項(xiàng)卡簡單實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07

