Vue 前端服务器API根据不同环境配置

简介: Vue 前端服务器API根据不同环境配置

前端开发中有这么一个需求,服务器提供两个分支接口,一个 master 分支用来开发测试,一个release 分 支发布稳定版。

前端代码发布,执行 npm installnpm rebuild 命令,构建好静态文件包后,移到 HTTP Server 下的指定目录。这些操作由 GitLab-CI 脚本完成。

解决思路是这样的,自动部署文件可以通过不同分支执行不同命令,通过执行不同的 build 命令,配置代码中的全局环境变量,前端代码通过判断全局环境变量的方式,引入不同的配置文件。

开始。 在 package.json 添加一个 master 分支的 build 命令, 添加 build-master 命令

...
"scripts": {
    "server": "node build/server.js",
    "dev": "node build/dev-server.js",
    "start": "npm run dev",
    "build-master": "node build/build.js -e master",
    "build": "node build/build.js",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "pytest": "cd ../backend && pytest",
    "test": "npm run unit && npm run pytest",
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
  },
...

build/build.js 中头部添加判断代码, 执行 npm run build 命令代表 release 分支,执行 npm run build-master 命令代表 master 分支, 分别对变量 process.env.NODE_ENV 进行赋值

const argv = require('optimist').argv
let e = argv.e
if (e && e === 'master') {
  process.env.NODE_ENV = 'master'
} else {
  process.env.NODE_ENV = 'production'
}

默认都通过发布的方式进行打包构建,修改 config/index.js 中的环境变量配置部分

const env = '"' + process.env.NODE_ENV + '"'
module.exports = {
  build: {
    env: env,
    ...
  },

这里的操作,会配置好 webpack.prod.conf.js 文件中的 process.env 这个全局变量

const webpackConfig = merge(baseWebpackConfig, {
  module: {
  ...
  plugins: [
    new webpack.DefinePlugin({
      'process.env': env
    }),
...

全局变量配置好后,在前端 main.js 代码中判断 process.env ,加载对应分支的配置,引入对应服务器的接口

main.js

let config = null
if (process.env === 'development') {
  config = require('../config/dev.env')
} else if (process.env === 'master') {
  config = require('../config/master.env')
} else {
  config = require('../config/prod.env')
}
let serverIP = config.serverIP.replace(/"/g, '')

master.env.js 配置文件参考

'use strict'
module.exports = {
  NODE_ENV: '"master"',
  serverIP: '"www.xxx.com"'
}

######注意这里的值都是单引号套双引号

修改 webpack.dev.conf.jsprocess.env 变量的值
...
module.exports = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: '#cheap-module-eval-source-map',
  plugins: [
    new webpack.DefinePlugin({
      'process.env': config.dev.env.NODE_ENV
    }),
...

示例项目参考链接: github.com/gywgithub/V…





相关文章
|
26天前
|
前端开发 JavaScript C++
探索前端框架选择:React vs Vue
在现代Web开发中,前端框架扮演着关键的角色。本文将探讨两个最受欢迎的前端框架之间的比较:React和Vue。我们将分析它们的特点、优缺点以及适用场景,帮助开发者做出明智的选择。
|
26天前
|
JavaScript API
【vue实战项目】通用管理系统:api封装、404页
【vue实战项目】通用管理系统:api封装、404页
19 3
|
1月前
|
前端开发
前端毕业设计|基于Vue+Nodejs实现游戏资讯平台(二)
前端毕业设计|基于Vue+Nodejs实现游戏资讯平台
|
2天前
|
前端开发 JavaScript C++
探讨前端框架选择:React vs Angular vs Vue
【2月更文挑战第2天】 在当今快速发展的前端开发领域,选择合适的前端框架至关重要。本文将深入探讨三大热门前端框架:React、Angular和Vue,分析它们的特点、优势和劣势,帮助开发者更好地理解并选择适合自己项目的前端框架。
8 3
|
2天前
|
JavaScript 前端开发 API
新一代前端框架Vue 4.0的特性及应用
【2月更文挑战第2天】随着前端技术的不断发展,Vue作为一款优秀的前端框架在市场上得到了广泛的应用和认可。本文将介绍新一代前端框架Vue 4.0的特性及其在实际项目中的应用,帮助开发者更好地了解并应用这一技术。
|
3天前
|
JavaScript 安全 API
深入理解Vue 3中的Composition API
深入理解Vue 3中的Composition API
26 3
|
19天前
|
JavaScript 前端开发 测试技术
消灭前端闪烁魔鬼:Vue中的防抖术
消灭前端闪烁魔鬼:Vue中的防抖术
37 0
|
23天前
|
JavaScript 前端开发 API
深入理解前端框架:Vue.js
本文将深入探讨前端框架中的一颗明珠——Vue.js。我们将了解Vue.js的基本概念、核心特性以及其在现代Web开发中的重要地位。通过对Vue.js的全面解析,读者将能够掌握使用Vue.js构建交互式和高效的前端应用程序的技巧和方法。
|
23天前
|
JavaScript 前端开发 开发者
深入理解前端框架Vue.js的数据响应式原理
本文将深入探讨Vue.js前端框架中的数据响应式原理,包括双向绑定、依赖追踪和虚拟DOM等核心概念。通过详细解析Vue.js内部实现机制,读者能够更好地理解其工作原理,并在实际开发中更灵活地运用。
|
24天前
|
JavaScript 前端开发 算法
探究前端框架Vue.js的响应式原理
本文将深入探讨前端框架Vue.js的核心特性——响应式原理。我们将介绍Vue.js中的数据绑定、依赖追踪和虚拟DOM等概念,并通过具体的示例代码解析其工作机制。通过了解Vue.js的响应式原理,开发者可以更好地利用这一特性构建灵活、高效的前端应用。

相关产品

  • 云迁移中心