【vue】vue根据不同环境(正式、测试)打包（二）

前言

当你想通过命令进行打包不同包，比如输入：npm run build_dev 就能打包出测试包，当然这个看情况，下面方法不是最好的，但也是一个方法（此方法不完善）。

• https://blog.youkuaiyun.com/weixin_41000111/article/details/84866040
• https://blog.youkuaiyun.com/weixin_41000111/article/details/84866040
• https://blog.youkuaiyun.com/weixin_41000111/article/details/84866040

使用场景

一般使用在 ajax 请求地方，比如说我测试环境是 www.api.lolku.cn/dev 。而正式环境是 www.api.lolku.cn/nice 。 那么你打包的话，就会打正式包，那么怎么解决了，根据不同命令进行打不同的包吧，想想就美好。

步骤

第一步：创建命令

下面在 packge.json 文件中，创建一条命令

{
  "name": "xxxx",
  "version": "1.0.0",
  "description": "xxxx",
  "author": "老程 <xxxxx@qq.com>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "build_dev": "node build/build_dev.js"  // 1、此处是自定义的。注意：不要把此注释复制代码中
  },
  "dependencies": {...
  },
  "devDependencies": {
    .....
}

第二步：创建 build_dev.js

在 build文件夹中，复制build.js文件，并且重新命名为 build_dev.js

第三步：定义变量

下面的变量用于判断打包那个配置环境

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

process.env.NODE_ENV = 'devs' // 1、定义变量

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...')
spinner.start()

.....

第四步：判断是否打哪个包

此处才是真正的换打包的地方。在build文件夹中找到 webpack.prod.conf 文件，修改下面的打包配置

'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

const env = process.env.NODE_ENV == 'devs' ? require('../config/dev.env') : 
require('../config/prod.env') ; // 1、此处就是判断哪个文件配置打包，如果是 devs 运行的，则测试包

const webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true,
      usePostCSS: true
    })
  },
  devtool: config.build.productionSourceMap ? config.build.devtool : false,
  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': env
    }),
    // UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: 

第五步：请求

此处略过一些配置测试与正式环境详情了。在 config 文件中的 dev.env.js与prod.env.js 文件，进行配置变量。在axios 封装的文件中，使用 process.env
.xx进行获取数据

第六步：打包

进行 npm run build_dev 。下面就是请求了。