vue服务器硬件要求,Vue 前端服务器API根据不同环境配置

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

支发布稳定版。

前端代码发布，执行 npm install 和 npm 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.js 中 process.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

}),

...