vue 配置多环境打包发布

  • 项目目录如下:
    项目结构
  • 在./config文件夹下新建一个prod.env.js 的文件(此为集成测试环境
  'use strict'
    module.exports = {
     NODE_ENV: '"production"',
     API_ROOT: '"http://cq8.xxxxxxxx.com:8080/epsm"',
     // API_ROOT: '',
     //集成测试
    }
  • 修改./build/build.js 文件,将 process.env.NODE_ENV = 'production' 注释或者删除,因为在后面需要动态配置NODE_ENV,
    'use strict'
    require('./check-versions')()
    //注释掉之前的
    // process.env.NODE_ENV = 'production'
    ​
    const ora = require('ora')
    const rm = require('rimraf')
    const path = require('path')
    const chalk = require('chalk')
    const webpack = require('webpack')
    const config = require('../config')
    const webpackConfig = require('./webpack.prod.conf')
    //注释掉之前的
    // const spinner = ora('building for production...')
    ​
    //修改后的动态配置
    const spinner = ora('building for' + process.env.NODE_ENV + '...')
    spinner.start()
  • 修改./build/webpack.prod.conf.js文件 修改 evn

    //注释掉之前的代码
    // const env = process.env.NODE_ENV === 'testing'
    //   ? require('../config/test.env')
    //   : require('../config/prod.env')
    ​
    //修改后的代码
    const env = require('../config/' + process.env.env_config+'.env')
    
  • 安装 cross-env 的插件

   yarn add cross-env -D   // 或者你使用npm 也可或者cnpm 
    npm install cross-env -dev--save
  • 修改 package.jsonscript 语句
 "scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "unit": "jest --config test/unit/jest.conf.js --coverage",
  "e2e": "node test/e2e/runner.js",
  "test": "npm run unit && npm run e2e",
  "build": "node build/build.js",
  "client": "node build/client.js",
  "build:client": "cross-env NODE_ENV=production env_config=client node build/build.js",
  "build:driver": "cross-env NODE_ENV=production env_config=driver node build/build.js",
  "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
  "build:dev": "cross-env NODE_ENV=production env_config=dev node build/build.js"
  }
  • 之后每添加一个环境,就重复第一部和最后一步

  • 参考掘金 作者huangjincq

  • 链接https://juejin.im/post/5a31e2c96fb9a045031018e4

你可能感兴趣的:(vue 配置多环境打包发布)