Webpack Vue-cli 2 根据不同命令打包

一、使用vue cli 2搭建项目

（vue cli2 会自动建立关于配置webpack的目录的）

cmd打开命令运行窗口

首先全局install一下webpack

npm install webpack -g

 使用vue cli2建立项目

npm install -g @vue/cli-init

 vue cli2是使用install命令，vue cli3是使用create命令，具体差异可以参考官方文档：创建一个项目 | Vue CLI

 初始化项目

vue init webpack project_name

然后会问一些配置问题，例如需不需要装vue-router什么的，可以选择这里自动安装了，也可以后续自己npm install

二、生产环境和开发环境，以及测试环境的配置

使用vue cli2之后，系统自动建立项目，会自动生成build，config目录

build目录下：

在build.js中，其实是默认process.env.NODE_ENV是production的，我这里把他注释掉了，其实这里不注释也可以的

'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')

然后可以看到，其实会自动进去webpack.prod.conf的，我们就需要在webpack.prod.conf中加入对环境的判断了

// const env = require('../config/prod.env')
var env = require('../config/dev.env')
if (process.env.NODE_ENV === 'testing') {
  env = require('../config/test.env')
}
if (process.env.NODE_ENV === 'production') {
  env = require('../config/prod.env')
}

那么接下来我们就要对不同的环境写不同的地址了

config目录下：

在dev.env中

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

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ENV_CONFIG: '"dev"',
  BASE_API: '"正式环境地址"'

})

在test.env中

'use strict'
module.exports = {
  NODE_ENV: '"testing"',
  ENV_CONFIG: '"test"',
  BASE_API: '"测试环境地址"'
}

在prod.env中

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prod"',
  BASE_API: '"生产环境地址"'
}

在配置这些.env文件的时候，NODE_ENV是个必要的变量，其他的两个可以自行改变添加，变量名也可以改的

也有问为什么单引号里面还要加个双引号的问题，我猜测应该是因为运行时的识别需要吧，至少我不加双引号是会报错的~

其实看到很多文章说要改动index.js中的assetsPublicPath，就是下面这段

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

但是我试验之后发现加不加点都不影响打包和运行的，所以我就没有进行改动了~

还有很多配置，大家有兴趣可以去看看各个配置的含义，比如上面这段代码中的proxyTable就是个代理表，一般我们运行的时候，会默认localhost运行，但是项目要用接口的时候呢？前面可能还要加个网址什么的，那么这里就可以加个转发地址处理。

三、编写不同运行命令

在package.json中添加以下代码即可~

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js",
    "build:dev": "cross-env NODE_ENV=development ENV_CONFIG=dev node build/build.js",
    "build:test": "cross-env NODE_ENV=testing ENV_CONFIG=test node build/build.js",
    "build:prod": "cross-env NODE_ENV=production ENV_CONFIG=prod node build/build.js"
  },

四、运行

然后npm run build:test就可以啦

npm run build:prod的话也差不多

 

可以看到这里正确识别了是testing还是production的，命令有效~

想要配置更多地址的也可以再自行配置，package.json加命令然后加对应的配置~

这里Build complete for production的打印是在build.js里面可以改动的，我是改成了这样：

console.log(chalk.cyan('  Build complete for ' + process.env.NODE_ENV + '.\n'))

然后可以看到对应的结果啦~那么具体打包完之后地址有没有改变呢？该怎么确认呢？可以看下我的这篇文章： 怎么确认webpack根据不同命令打包之后环境变了？（Vue）npm run build:test_普普通通学习不内卷的博客-CSDN博客

最后送大家一个我上面这些的源码~直接改动地址，就可以根据不同环境打包啦！！

https://github.com/MelissaSun17/test-for-webpack