我的编程空间,编程开发者的网络收藏夹
学习永远不晚

vue如何使用process.env搭建自定义运行环境

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

vue如何使用process.env搭建自定义运行环境

一、vue-cli项目下默认有三种模式

  • development:在 vue-cli-service serve 时使用。
  • production:在 vue-cli-service build 和 vue-cli-service test:e2e 时使用。
  • test:在 vue-cli-service test:unit 时使用。

对应的 process.env.NODE_ENV 值分别为 development、production、test。

二、可以通过环境文件来指定默认环境变量和自定义环境变量

环境文件有一下几个类型:

  • .env: 在所有的环境中被载入
  • .env.local: 在所有的环境中被载入,但会被 git 忽略
  • .env.[mode]: 只在指定的模式中被载入
  • .env.[mode].local: 只在指定的模式中被载入,但会被 git 忽略

mode是某个模块名,如 在class="lazy" data-src创建 .env.friend 文件,内容:

NODE_ENV=development // 这里可以指定默认的环境是 development、production、test。
VUE_APP_ENV=friend  // 自定义的friend环境

注意自定义的变量名必须以 VUE_APP_ 开头才能被webpack.DefinePlugin 静态嵌入,通过process.env.VUE_APP_xxx 来访问;执行此文件就相当于“进入”friend环境了。

三、执行自定义环境文件,进入自定义环境

在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",
  },

执行 npm run serve:f,此时process.env.NODE_ENV为development, process.env.VUE_APP_ENV为friend,利用process.env.VUE_APP_ENV定义ip等信息即可,即可访问后台朋友的接口了。

四、配置举例和应用场景 vue-cli3

public/config/build.js,这里未使用自定义环境(未用process.env.VUE_APP_ENV)

let root = process.env.NODE_ENV;

let build = {
  development: {
    //开发人员本地调试开发环境
    publicPath:"/",
    outputDir:"xuzhou_shuiwu_web",
  },
  production: {
    publicPath:"./",
    outputDir:"xuzhou_shuiwu_web",
  },
  test: {
  },
  // 公网环境
  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";// 代理关键字
// 通用配置
let common = {
  key: key,
  host: "0.0.0.0",
  port: "8888",
  localhost: "0.0.0.0:8888",
  upload: key + "/file/uploadFile", // 文件上传地址
}
let ipConfig = {
  // 默认环境
  development: {
    serverIP: "http://1.1.1.1:8883/portal/",  
    logoutIp: "http://1.1.1.1:8883/portal/cas/logout/",

  },
  // 正式环境
  production: {
    serverIP: "http://1.1.1.1:8082/portal/", 
    logoutIp: "http://1.1.1.1:8082/portal/cas/logout/",
  },
  // 测试环境
  test: {
  },
  // 自定义环境
  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("当前环境:",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: "./", //打包后的位置(如果不设置这个静态资源会报404) ./
  // vue-cli 3 已废弃baseUrl
  publicPath: config.build.publicPath,
  outputDir: config.build.outputDir, //打包后的目录名称
  assetsDir: "static", //静态资源目录名称
  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相关配置
  // chainWebpack: config => {
  //   // config.entry.app = ['./class="lazy" data-src/main.js'];
  //   config.resolve.alias.set("@", resolve("class="lazy" data-src")).set("#", resolve("public"));
  // },
  // webpack3,4的写法
  configureWebpack: {
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        '@': resolve('class="lazy" data-src'),
        // '~': process.cwd(),
        '#': resolve('public'),
        // components: resolve('class="lazy" data-src/components'),
        // util: resolve('class="lazy" data-src/utils'),
        // store: resolve('class="lazy" data-src/store'),
        // router: resolve('class="lazy" data-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,
});

在单点登录中,可以在router.js中判断无权限跳转时使用:

location.href = config.serverIP + “cas/login?redirect=” + url

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

vue如何使用process.env搭建自定义运行环境

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

vue如何使用process.env搭建自定义运行环境

这篇文章主要介绍了vue如何使用process.env搭建自定义运行环境,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2023-01-10

SpringBoot2如何自定义启动页、项目打包和指定运行环境

这篇文章主要介绍了SpringBoot2如何自定义启动页、项目打包和指定运行环境,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、打包简介springboot的打包方式有很多
2023-06-02

如何使用Docker+jenkins+python3进行环境搭建

本篇内容介绍了“如何使用Docker+jenkins+python3进行环境搭建”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!前言:  自动
2023-06-20

PHP扩展开发:如何将自定义函数加载到PHP运行环境中?

需要将自定义函数加载到php运行环境中,可以通过编写php扩展来实现。步骤如下:1. 使用c语言或汇编语言编写扩展模块,包含自定义函数的实现;2. 创建声明文件,声明函数列表和配置选项;3. 在php.ini中添加扩展加载路径;4. 重新加
PHP扩展开发:如何将自定义函数加载到PHP运行环境中?
2024-05-15

gitee如何搭建自己的博客并使用自定义域名

Gitee是一款优秀的码云平台,它可以为用户提供代码托管、项目管理、团队协作等多种有用的功能。但是,有些人不知道,Gitee还可以用来搭建自己的博客,并且还可以使用自定义域名,接下来,本文就将为大家详细介绍如何使用Gitee搭建自己的博客并
2023-10-22

如何搭建使用远程Docker进行集成测试的环境

这篇文章将为大家详细讲解有关如何搭建使用远程Docker进行集成测试的环境,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。需求背景团队有集成测试的需求,集成测试需要依赖一些中间件,比如mysql,rabbi
2023-06-20

如何在phpcms中构建自定义的表单和数据收集系统?(phpcms环境下,如何构建个性化的表单以收集用户数据?)

在PHPCMS中构建自定义表单和数据收集系统包括:创建表结构、设计表单布局、编写表单处理程序、集成到PHPCMS、验证和存储数据。通过创建表格、设计表单、编写处理脚本,并使用模板函数将表单与PHPCMS集成,您可以收集和管理用户数据。此外,自定义模板、第三方表单库和PHPCMS插件可以增强表单功能和数据处理。
如何在phpcms中构建自定义的表单和数据收集系统?(phpcms环境下,如何构建个性化的表单以收集用户数据?)
2024-04-02

编程热搜

目录