Vue项目判断开发、测试、正式环境过程

目录
  • 方法一
  • 方法二
    • 1.在build文件夹中创建test.js文件
    • 2.修改config文件夹中的prod.env.js文件
    • 3.在package.json文件中添加npm run test命令
    • 4.在项目代码中判断环境

方法一

最简单的方法：通过判断location.href来判断环境

function env() {
    if (process.env.NODE_ENV === "development") return "development";   //开发环境
    if (window.location.href.includes('192.168')) return 'test';        //测试环境，"192.168"根据实际情况而定
    return 'production'                                                 //线上环境
}

方法二

适用于Vue Cli 2.x构建的项目

Vue Cli 2.x构建的项目只有npm run dev和npm run build两条开发和编译的命令。而要添加测试环境，我们可以扩展一条npm run test的命令输出测试环境下执行的代码。

1.在build文件夹中创建test.js文件

test.js中的代码很简单，就两行。主要就是配置一个环境变量用以区别测试和正式环境。这里没有直接修改原有的process.env.NODE_ENV是担心会影响到原本的逻辑。

注意：type的值必须单双引号两层嵌套，不能直接为’test’，否则会报错，具体代码如下：

// 配置环境变量 type 为 test
process.env.type = '"test"'
// 引入build.js文件，执行原先的编译代码
require('./build')

2.修改config文件夹中的prod.env.js文件

配置好后就可以在项目代码中调用process.env.type了，代码如下：

module.exports = {
  NODE_ENV: '"production"',
  // 将上文设置的环境变量，赋值到 type 属性上
  type: process.env.type
}

3.在package.json文件中添加npm run test命令

添加一条命令，执行我们上文创建的test.js文件

"scripts": {
    "dev": "node build/dev-server.js",
    "test": "node build/test.js",
    "build": "node build/build.js"
},

4.在项目代码中判断环境

按照上述的步骤做完后，就可以在项目代码中写判断了

let baseURL
// 开发环境
if (process.env.NODE_ENV === 'development') {
    baseURL = 'http://192.168.1.110:8080/'
// 编译环境
} else {
    // 测试环境
    if (process.env.type === 'test') {
        baseURL = 'http://test.xxx.com/'
    // 正式环境
    } else {
        baseURL = 'http://app.xxx.com/'
    }
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue项目打包之开发环境和部署环境的实现

    项目开发阶段和生产环境可能不一样 如前端在开发阶段,接口可能是自己使用 node.js 搭建的服务器,API 返回的也都是假数据,等后台接口开发好后,再切换成后台提供的接口,等测试没有问题,服务端上线后,又要改成正式的接口 手动改动接口,既繁琐又容易出错(当然,区别还不止这些) 优雅的解决方案是,分别使用两个入口文件,一个用于开发环境打包,一个用于生产环境打包 具体来说,分为下面几个步骤 1.创建入口文件 在 src 目录下新建 prod_env.js 和 dev.env.js 将main.js

  • Vue项目环境搭建详细总结

    Vue项目环境搭建详细总结

    关于Vue安装的详细步骤总结 安装NodeJs 首先解释一下什么是nodejs,为什么要安装node?node的优点? node.js是一个运行在chromeJavascript运行环境下(俗称GoogleV8引擎)的开发平台,用来方便快捷的创建服务器端网络应用程序,也可以把它理解为一个轻量级的JSP或PHP环境,如果用来开发Web应用的话,有时要便捷很多. node.js的最大优点是处理并行访问,如果一个web应用程序同时会有很多访问连接,就能体现使用node.js的优势. 另一个好处是,使用

  • vue-cli3 配置开发与测试环境详解

    vue-cli3 配置开发与测试环境详解

    需求 首先介绍一下本项目的背景,是基于 vue-cli3.1.1 的单页应用,目前测试环境和生产环境都在线上,并且都在同一个域名下,其中生产环境部署在根目录下,测试环境部署在名为 test 的子目录下,根据生产环境和测试环境的不同,某些界面和交互有细微的差别. 根据以上项目的基本情况,分析出需求如下: 实现区分线上生产环境和线上测试环境的环境变量,供项目代码中全局使用. 实现输入一行命令,执行两条指令,分别打包线上生产环境和线上测试环境的代码. 实现打包之后,自动将打包好的文件夹分别按照项目名+

  • vue如何自动化打包测试环境和正式环境的dist/test文件

    使用vue现在已经差不多2年了,想起来两年前的一次和某阿里处理的技术大牛(当时我们的技术总监)一起开发一个SPA项目的时候被硬着头皮去解决的一个难题,因为技术老大是阿里出身的,所以很多东西都是比较倾向于自动化,从项目ui设计到项目管理,到打包测试,到发布全部都要求我们要实现自动化,尽可能的减少手动操作. 当时技术大佬要求的事在jenkins进行一键打包,就是他点击不同的按钮在同一套代码上面分别打包测试环境运行的包和正式环境运行的包,刚刚接触vue的我摸不着头脑,老大给了我一天时间研究这个玩意,没

  • Vue项目判断开发、测试、正式环境过程

    目录 方法一 方法二 1.在build文件夹中创建test.js文件 2.修改config文件夹中的prod.env.js文件 3.在package.json文件中添加npm run test命令 4.在项目代码中判断环境 方法一 最简单的方法:通过判断location.href来判断环境 function env() {     if (process.env.NODE_ENV === "development") return "development";  

  • 详解用Docker搭建Laravel和Vue项目的开发环境

    本文介绍了用Docker搭建Laravel和Vue项目的开发环境,分享给大家,具体如下: 在这篇文章中我们将通过Docker在个人本地电脑上构建一个快速.轻量级.不依赖本地电脑所安装的任何开发套件的可复制的Laravel和Vue项目的开发环境(开发环境的所有依赖都安装在Docker构建容器里),加入Vue只是因为有的项目里会在Laravel项目中使用Vue做前后端分离开发,开发环境中需要安装前端开发需要的工具集,当然前后端也可以分成两个项目开发,这个话题不在本篇文章的讨论范围内. 所以我们的目标

  • Vue项目中使用Vux的安装过程

    Vue项目中使用Vux的安装过程

    最近想用vue+vux写一个项目,于是到vux的官网看了文档开始着手搭建项目,但是遇到一些坑.下面简单说下安装vux 的过程. 默认已安装vue环境 1.安装vux npm install vux --save-dev 2.安装vux-loader npm install vux-loader --save-dev //官网没提安装这个,但是不安装会报错 3.安装less-loader以正确编译less源码 npm install less less-loader --save-dev 4.安装

  • django项目、vue项目部署云服务器的详细过程

    django项目、vue项目部署云服务器的详细过程

    目录 上线架构图 服务器购买与远程连接 安装git 安装mysql 安装redis(源码安装) 安装python3.8(源码安装) 安装uwsgi 安装虚拟环境 安装nginx(源码安装) vue项目部署 django项目部署 项目依赖安装 数据库配置 使用uwsgi启动django 后端样式处理 上线架构图 服务器购买与远程连接 服务器可以在阿里云控制台首页 (aliyun.com).登录 - 腾讯云 (tencent.com)购买. 这里我选择购买阿里云的云服务器ECS,购买时按自己需求,镜

  • HBuilder导入vue项目并通过域名访问的过程详解

    HBuilder导入vue项目并通过域名访问的过程详解

    目录 一.什么是node.js 二.node.js和npm关系 三.导入项目 通常运行vue项目需要安装Node.js.通过npm命令来安装vue组件和运行vue项目. 一.什么是node.js node.js不是一门语言,不是库,不是框架,只是一个javeScript运行时环境 简单的就是node.js可以解析和执行javeScript代码,以前只有浏览器可以解析执行JaveScript代码, 现到的javeScript可以完全脱离浏览器来运行,一切都归功于node.js. nodejs构建于

  • 加快Vue项目的开发速度的方法

    现如今的开发,比如是内部使用的管理平台这种项目大都时间比较仓仓促.实际上来说在使用了webpack + vue 这一套来开发的话已经大大了提高了效率.但是对于我们的开发层面.还是有很多地方可以再次提高我们的项目开发效率,让我们更加专注于业务,毕竟时间就是生命.下面我们挨个来探讨. 巧用Webpack Webpack是实现我们前端项目工程化的基础,但其实她的用处远不仅仅如此,我们可以通过Webpack来帮我们做一些自动化的事情.首先我们要了解require.context()这个API requi

  • vue项目中安装less依赖的过程

    目录 vue安装less依赖 一.安装less依赖 二.修改webpack.base.conf.js文件 vue中less知识点总结 安装 变量(Variables) 混合(Mixins) 嵌套(Nesting) 运算(Operations) 转义(Escaping) 函数(Functions) 命名空间和访问符 映射 作用域(Scope) scss和stylus vue安装less依赖 一.安装less依赖 npm install less less-loader --save 二.修改web

  • Vue项目打包部署的实战过程记录

    Vue项目打包部署的实战过程记录

    目录 前言 一.准备工作--服务器和nginx使用 1. 准备一台服务器 2. nginx安装和启动 3. 了解nginx: 修改nginx配置,让nginx服务器代理我们创建的文件 二.Vue项目打包同步文件到远程服务器 1. 打包 2. 同步到远程服务器 3. 同步ssh key 三.非域名根路径发布 1. nginx配置 2. 项目配置 3. 绝对路径引用的静态资源找不到的问题 四.history模式部署 1. 项目配置 2. nginx配置 3. history模式部署到非域名根路径下

  • Vue项目中打包优化的四种方法详解

    目录 前言 打包优化的目的: 性能优化的主要方向: 1.异步组件配置(路由懒加载) 2.去掉打包后的 console 3.使用CDN 4.yarn build生成dist目录 总结 前言 默认情况下,通过import语法导入的第三方依赖包,最终会全部打包到一个js文件中,会导致单文件体积过大大,在网速底下时会阻塞网页加载,影响用户体验. 打包优化的目的: 1.项目启动速度,和性能 2.必要的清理数据 3.减少打包后的体积 第一点是核心,第二点呢其实主要是清理console 性能优化的主要方向:

  • 详解webpack编译多页面vue项目的配置问题

    本文主要介绍了webpack编译多页面vue项目的配置问题,分享给大家,具体如下: 一般情况下,构建一个vue项目的步骤为: 1,安装nodejs环境 2,安装vue-cli cnpm install vue-cli -g 3,构建vue项目 vue init webpack-simple vue-cli-multipage-demo 4, 安装项目依赖包 cnpm install 5,在开发环境下运行该项目: npm run dev 通过上面这几步一个简单的vue项目的开发环境基本就搭建起来,

随机推荐