vue中怎么区分不同的环境

目录
  • 如何区分不同环境
    • 方式一、手动修改不同的变量
    • 方式二、使用process.env.NODE_ENV来区分
    • 方式三、编写不同的环境变量配置文件
  • vue配置不同环境
    • 需要配置以下文件

如何区分不同环境

我们在vue开发中常常要根据不同的环境区分不同的变量，常见的环境有如下几种：

  • 生产环境：production,
  • 开发环境：development,
  • 测试环境：test。

方式一、手动修改不同的变量

const BASE_URL = 'http://dlfordmc.org/dev'
const BASE_NAME = 'coder'
// const BASE_URL = 'http://dlfordmc.org/prod'
// const BASE_NAME = 'kobe'
// const BASE_URL = 'http://dlfordmc.org/test'
// const BASE_NAME = 'james'
export { BASE_URL, BASE_NAME }

我们当处于什么环境下，就将什么变量的注释取消。这样做太过于繁琐，并且也不安全。如果我们忘记，当处于生产环境下的，我们使用的是开发环境下的变量，此时就会造成不安全。

方式二、使用process.env.NODE_ENV来区分

let BASE_URL = ''
let BASE_NAME = ''
if (process.env.NODE_ENV === 'production') {
  BASE_URL = 'http://dlfordmc.org/prod'
  BASE_NAME = 'dmc'
} else if (process.env.NODE_ENV === 'development') {
  BASE_URL = 'http://dlfordmc.org/deve'
  BASE_NAME = 'dl'
} else {
  BASE_URL = 'http://dlfordmc.org/test'
  BASE_NAME = 'dlfordmc'
}
export { BASE_NAME, BASE_URL }

方式三、编写不同的环境变量配置文件

需要在根目录下编写三个文件：

  • .env.development
VUE_APP_BASE_URL=https://fordmcdl.org/devepment
VUE_APP_BASE_NAME=devepmemt
  • .env.production
VUE_APP_BASE_URL=https://fordmcdl.org/production
VUE_APP_BASE_NAME=production
  • .env.test
VUE_APP_BASE_URL=https://fordmcdl.org/test
VUE_APP_BASE_NAME=test

此时在其他地方访问的时候

  console.log(process.env.VUE_APP_BASE_URL)   //https://fordmcdl.org/devepment
  console.log(process.env.VUE_APP_BASE_NAME)  //devepmemt

注意：此时必须要加上VUE_APP，访问的时候需要加上process.env

vue配置不同环境

官网学习：https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F

假如项目有4个环境：开发、生产、测试、其他

需要配置以下文件

1.package.json

vue脚手架默认有2个环境，开发和生产，在本地环境开发，发布到生产环境，配置如下

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },

如果变成4个环境，1个本地开发，3个可发布测试。

首先，我们需要想清楚，我们需要的是什么。

① 需要本地开发，打包到不同环境测试发布；

② 还是开发时就是不同环境，打包也是不同环境

如果是第一种

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js",
    //用这种
    "build--dev": "cross-env NODE_ENV=production env_config=dev node build/build.js",
    "build--test": "cross-env NODE_ENV=production env_config=test node build/build.js",
    "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
    //或用这种vue3.0
    "build":"vue-cli-service build --mode development",
    "prodbuild":"vue-cli-service build --mode production",
    "testbuild":"vue-cli-service build --mode test"
  },

如果是第二种

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "test": "vue-cli-service serve --mode test",
    "production": "vue-cli-service serve --mode production" ,
    "build":"vue-cli-service build --mode development",
    "prodbuild":"vue-cli-service build --mode production",
    "testbuild":"vue-cli-service build --mode test"
  },

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

赞 (0)

相关推荐

  • vue实践---根据不同环境,自动转换请求的url地址操作

    一般的项目环境分为:本地环境,测试环境,预发环境,正式环境. 这些环境的域名一般是一样的, 前端请求接口的url也会随着这些环境的变化而改变,手动修改有点麻烦,所以想个办法,让请求的地址根据域名改变而改变. 第一步: 建立一个RequestConfig.js 作为配置文件,内容如下: const APIMapping = { project1: { test: 'http://123.com', local: 'http://abc.com' }, project2: { test: 'http

  • vue相关配置文件详解及多环境配置详细步骤

    1.package.json 作用: package.json 文件其实就是对项目或者模块包的描述,里面包含许多元信息.比如项目名称,项目版本,项目执行入口文件,项目贡献者等等.npm install 命令会根据这个文件下载所有依赖模块. 文件结构如下: { "name": "sop-vue", "version": "0.1.0", "author": "zhangsan <zhangsa

  • vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)

    在新建好的项目中,一般执行npm run build就是打包了,但此时只能打包到一个环境,不同环境需要配置不同的地址,可以手动更改接口的地址,也可以自行配置命令而不需要每次打包进行地址切换,步骤如下: 文件结构如下图: 1)在config文件内新建test.env.js文件: 'use strict' module.exports = { NODE_ENV: '"testing"', ENV_CONFIG:'"test"' } 2)修改config内的prod.en

  • 详解vue 不同环境配置不同的打包命令

    最近做的一个项目是配置了三个环境的:正式环境.测试环境和开发环境,下面以这个为例 第一步:安装cross-env npm i --save-dev cross-env 或者在 package.json中加上"cross-env": "^5.0.1"进行安装依赖 package.json: //这是我项目的目录 第二步:修改各环境下的参数 在config/目录下添加test.env.js.develop.env.js.并且修改文件里的内容 config/prod.en

  • vue-cli3.0如何使用CDN区分开发、生产、预发布环境

    前言:上一篇记录文vue-cli 3.0 build包太大导致首屏过长的解决方案中提到了CDN优化,之前是直接在html中手动注入JS,也没有对开发和生产模式进行区分,因为是使用收费的CDN,所以在开发模式会遇到无权使用CDN的问题.要是使用CDN写死在html中,不同环境需要手动的切换CDN,那么早晚有一天会搞乱,下面就说说怎么在vue-cli 3.0 中根据不同环境动态注入CDN. 1. 修改public/index.html 通过htmlwebpackplugin动态注入脚本和样式,ind

  • vue中怎么区分不同的环境

    目录 如何区分不同环境 方式一.手动修改不同的变量 方式二.使用process.env.NODE_ENV来区分 方式三.编写不同的环境变量配置文件 vue配置不同环境 需要配置以下文件 如何区分不同环境 我们在vue开发中常常要根据不同的环境区分不同的变量,常见的环境有如下几种: 生产环境:production, 开发环境:development, 测试环境:test. 方式一.手动修改不同的变量 const BASE_URL = 'http://dlfordmc.org/dev' const

  • vue中Npm run build 根据环境传递参数方法来打包不同域名

    项目开发中,前端在配置后端api域名时很困扰,常常出现: 本地开发环境: api-dev.demo.com 测试环境: api-test.demo.com 线上生产环境: api.demo.com, 这次是在Vue.js项目中打包,教大家个方法: 使用 npm run build -- xxx   ,根据传递参数xxx来判定不同的环境,给出不同的域名配置. 1.项目中/config/dev.env.js修改: 新增:HOST: '"dev"' 'use strict' const me

  • vue中控制mock在开发环境使用,在生产环境禁用方式

    vue中控制mock在开发环境使用,在生产环境禁用方式

    目录 vue控制mock在开发环境使用,在生产环境禁用 说下原因 解决方案 vue中使用mock(常用方式) 前期准备 安装axios和mock.js插件 在main.js中引入 编写mock.js 调用 成功 vue控制mock在开发环境使用,在生产环境禁用 说下原因 mock拦截所有的axios请求,根据请求,做出相应的响应.平时前后端分离开发,我们使用mock获得相应的数据,但当和后端联调的时候,不禁用mock,就无法获得后端数据. 解决方案 第一步.我们设置mock在开发developm

  • vue中mint-ui环境搭建详细介绍

     vue中mint-ui环境搭建详细介绍 首先需要如下配置node (最好用淘宝源) $ npm install -g cnpm --registry=https://registry.npm.taobao.org 以及git 从官方github拉下来mint-ui git clone https://github.com/ElemeFE/mint-ui.git 进入mint-ui npm run dev 全程大概5-10分钟,出现 Build completed in 34.926s Chil

  • 如何区分vue中的v-show 与 v-if

    1. v-show 不管初始的条件是什么,元素总是会被渲染,并且只是简单的基于 CSS display: none 或者 display: block 的属性进行切换. 2. v-if 会根据初始的条件(data里自己的定义的数据)来进行真正的渲染(组件真正的销毁和重建),如果条件为真,才会开始渲染条件块,如果条件为假,则不会渲染条件块. 注意: v-if不要和v-for一起使用! 当和 v-for 一起使用时,v-for 的优先级比 v-if 更高,详见 vue官网关于 v-for 的详细描述

  • 解决vue中使用proxy配置不同端口和ip接口问题

    问题描述: 使用vue-cli创建的项目,开发地址是localhost:8080,由于后台开发不同的模块,导致每个模块请求的ip和端口号不一致 例如:http://192.168.10.22:8081  或者 http://192.168.10.30:9999等 解决问题: 在vue.config.js中配置不同的端口号 module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/', devSe

  • 关于Vue中axios的封装实例详解

    前言 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 作为一个优秀的 HTTP 库,axios 打败了曾经由 Vue 官方团队维护的 vue-resource,获得了 Vue 作者尤小右的大力推荐,成为了 Vue 项目中 HTTP 库的最佳选择. 虽然,axios 是个优秀的 HTTP 库,但是,直接在项目中使用并不是那么方便,所以,我们需要对其进行一

  • 详解vue中axios请求的封装

    axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库:封装axios,一方面为了以后维护方便,另一方面也可以对请求进行自定义处理 安装 npm i axios 封装 我把axios请求封装在http.js中,重新把get请求,post请求封装了一次 首先,引入axios import axios from 'axios' 设置接口请求前缀 一般我们开发都会有开发.测试.生产环境,前缀需要加以区分,我们利用

  • nuxt.js添加环境变量,区分项目打包环境操作

    最近由于业务需求,开发了一个nuxt.js项目. 配置打包环境变量时,发现nuxt.js的文档过于简单,无法做参照. 经查证了一些资料后,解决了该问题.遂整理成文档,发布于此,给同行一些参照. 一.添加cross-env插件 npm npm i cross-env yarn yarn add cross-env 二.添加环境变量文件 根目录添加env.production NODE_ENV = 'production' VUE_APP_TITLE = 'production' 根目录添加env.

  • vue中对接Graphql接口的实现示例

    vue中对接Graphql接口的实现示例

    说明: 本文是本人正在搞nestjs+graphql+serverless训练营中对Graphql讲解的基础知识点,可能有点前后没对接上,文中提到的Graphql授权也是下小节介绍的 一.对原来的Express返回Graphql项目修改 本章节使用的代码是express返回Graphql的代码,在使用前要先对代码进行基本的配置,比如处理跨域问题(Graphql本质也是发送一个http请求,既然是这样在vue项目中自然存在跨域的问题,需要先处理) 1.安装跨域的包,并且配置中间件 npm inst

随机推荐