欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue如何使用process.env搭建自定義運(yùn)行環(huán)境

 更新時(shí)間：2023年01月10日 14:41:48   作者：aら　淼  
這篇文章主要介紹了vue如何使用process.env搭建自定義運(yùn)行環(huán)境，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

一、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)文章

最新評(píng)論