H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue-cli 根据不同的环境打包

项目开发中有三个环境,分别是测试环境,预生产环境,生产环境

如题,根据项目需要,目前需要打包,通过vue-cli中的npm run build 打包,这个只能打包到一个环境,但是,项目中有三个环境,每个环境的接口地址都不同,根据process.env分别进行接口的调用,但是如何处理打包呢?

目前的解决方案是复制了几个,build下面的build.js ,感觉这样并不是最优的解决方案,
不知是否有更完美的解决方案?
感激不尽!

回答:

解决此类问题还得靠自己,大神一般都不给力
vue-cli 中build中build.js部分代码做如下修改

require('./check-versions')()

// process.env.NODE_ENV = 'production'

var ora = require('ora')
var rm = require('rimraf')
var path = require('path')
var chalk = require('chalk')
var webpack = require('webpack')
var config = require('../config')
var webpackConfig = require('./webpack.prod.conf')

var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()
// var spinner = ora('building for production...')
// spinner.start()
。。。。

build中webpack.prod.conf.js做如下修改

const env = config.build[process.env.env_config+'Env']
// var env = process.env.NODE_ENV === 'testing' ?
//     require('../config/test.env') :
//     config.build.env
。。。。

config中的index.js 部分代码修改如下

module.exports = {
    build: {
        prodEnv: require('./prod.env'),
        sitEnv: require('./sit.env'),
        ppeEnv: require('./ppe.env'),
        index: path.resolve(__dirname, '../dist/' + new_dateTime + '/index.html'),
        。。。。。

config中 dev.env.js 修改
开发环境用的是测试接口,通过merge进行拷贝

var merge = require('webpack-merge')
var sitEnv = require('./sit.env')

module.exports = merge(sitEnv, {
  NODE_ENV: '"development"'
})

在config中新建sit.env.js

//测试
module.exports = {
  NODE_ENV: '"sitEnvironment"',
  ENV_CONFIG: '"sit"',
  hosturl: '"https://sitxxx"',
。。。
}

在config中新建ppe.env.js

//预生产
module.exports = {
  NODE_ENV: '"ppeEnvironment"',
  ENV_CONFIG: '"ppe"',
hosturl: '"https://ppexxx"'
。。。
}

生产环境是prod.env.js vue-cli 自带

安装cross-env

package.json 修改

  "scripts": {
    "dev": "node build/dev-server.js",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
    "build:ppe": "cross-env NODE_ENV=ppeEnvironment env_config=ppe node build/build.js",
    "build:sit": "cross-env NODE_ENV=sitEnvironment env_config=sit node build/build.js",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run e2e"
  },

end

回答:

前提:通过 vue-cli 使用 webpack 项目模板创建的项目

先研究一下 build 目录下的内容,然后设置不同的环境变量,API 路径、端口以及 vue-router 的 base 等,还可以通过 webpack define plugin 将环境变量传递到前端

如果想有人带着研究 build 目录下的内容,可以参加我的讲堂讲座《学习 Vue 你需要知道的 webpack 知识》,另外也可以参加极客学院的同名课程

回答:

let baseUrl = ''
if (process.env.NODE_ENV === 'development') {
  baseUrl = 'http://dev.xxx.com/Api'
} else {
  baseUrl = '//www.xxx.com/Api'
}

回答:

如何根据不同环境启动呢

本文地址:H5W3 » vue-cli 根据不同的环境打包

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址