乐趣区

关于javascript:Vue-20-添加多环境打包配置二vue-init-webpack创建的项目有buildconfig目录

jiezi

Webpack 代理 + 多环境打包配置 (开发，测试，预生产，生产)

一：配置 proxy 代理

config/index.js

module.exports = {
  dev: {
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    proxyTable: {
      "/web": {
        // target: "http://192.168.2.666/", // 接口域名,
        target: "http://192.168.2.777:81/", // 接口域名,
        // target: "http://uat.baiddu.com/api/", // 预生产域名,
        // target: "https://api.baidu.com/", // 接口域名,
        changeOrigin: true, // 是否跨域
        // logLevel:'debug',
        pathRewrite: {"^/web": "/web" // 须要 rewrite 重写的,}
      }
   
    },
    
  }
}

二：通过 corss-env, 批改相干配置，build 不同环境代码

1. 装置 
 npm install cross-env -dev--save
2. 批改各环境下的参数，在 config 目录下增加 test.env.js，uat.env.js 并批改 dev.env.js, prod.env.js, 批改后内容如下

test.env.js

'use strict'
module.exports = {
  NODE_ENV: '"testing"',
  env_config:'"test"',
  API:'"http://192.168.2.777:81/web"'
}

dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  env_config:'"dev"',
  API:'"/web"'
 
})

uat.env.js

'use strict'
module.exports = {
  NODE_ENV: '"usertest"',
  env_config:'"uat"',
  API:'"http://uat.baidu.com/web"'
}

prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  env_config:'"prod"',
  API:'"https://api.bitdu.com/web"'
}
3. 批改 package.json 文件中的 scripts 内容.(NODE_ENV 最好都设成 production，因为在 build/utils.js 只做了 production 一种断定)
 "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build-test": "cross-env NODE_ENV=production env_config=test node build/build.js",
    "build-uat": "cross-env NODE_ENV=production env_config=uat node build/build.js",
    "build-prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
  },
4. 批改 config/index.js 文件中 build 参数，这里的参数会在 build/webpackage.prod.conf.js 中应用到 
build: {
    // Template for index.html
    // 增加 test  prod 环境的配制
    testEnv: require('./test.env'),
    uatEnv: require('./uat.env'),
    prodEnv: require('./prod.env'),   
}
5. 对 build/webpackage.prod.conf.js 文件进行批改，调整 env 常量的生成形式。
// 共性 env 常量的定义
// const env = require('../config/prod.env')
const env = config.build[process.env.env_config+'Env']
6. 批改 build/build.js 文件，删除 process.env.NODE_ENV 的赋值，批改 spinner 的定义，调整后的内容如下：
'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')
// 批改 spinner 的定义
// const spinner = ora('building for production...')
var spinner = ora('building for' + process.env.NODE_ENV + 'of' + process.env.env_config+ 'mode...')
spinner.start()
7. 在网络申请处，设置 baseUrl
// 设置 baseURL
axios.defaults.baseURL = process.env.API
8. 执行打包 
npm run build-test
退出移动版