vue给不同环境配置不同打包命令

古城微笑少年丶 2022-05-16 05:11 189阅读 0赞

# [vue给不同环境配置不同打包命令][vue] #

**第1步：安装cross-env**

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>npm i --save-dev cross-env</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

**第2步：修改各环境下的参数**

**在config/目录下添加test.env.js、pre.env.js。**

**修改prod.env.js里的内容，修改后的内容如下：**

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>'use strict'</code> 
     </div> 
     <div> 
      <code>module.exports = { </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>NODE_ENV: </code> 
      <code>'"production"'</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>EVN_CONFIG:</code> 
      <code>'"prod"'</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>API_ROOT:</code> 
      <code>'"/apis/v1"'</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

分别对test.env.js和pre.env.js文件内容进修修改，修改后的内容如下：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>'use strict'</code> 
     </div> 
     <div> 
      <code>module.exports = { </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>NODE_ENV: </code> 
      <code>'"testing"'</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>EVN_CONFIG:</code> 
      <code>'"test"'</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>API_ROOT:</code> 
      <code>'"/test/apis/train"'</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>'use strict'</code> 
     </div> 
     <div> 
      <code>module.exports = { </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>NODE_ENV: </code> 
      <code>'"presentation"'</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>EVN_CONFIG:</code> 
      <code>'"pre"'</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>API_ROOT:</code> 
      <code>'"/pre/apis/train"'</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

对dev.env.js文件内容进行修改，修改后的内容如下。dev环境配制了服务代理，API\_ROOT前的api是配制的代理地址。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>module.exports = merge(prodEnv, { </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>NODE_ENV: </code> 
      <code>'"development"'</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>VN_CONFIG: </code> 
      <code>'"dev"'</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>API_ROOT: </code> 
      <code>'"api/apis/v1"'</code> 
     </div> 
     <div> 
      <code>})</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

**第3步：修改项目package.json文件**

**对package.json文件中的scripts内容进行个性，添加上新定义的几种环境的打包过程，里的参数与前面的调协保持一致。**

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>"scripts"</code> 
      <code>: { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>"dev"</code> 
      <code>: </code> 
      <code>"webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>"start"</code> 
      <code>: </code> 
      <code>"npm run dev"</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>"build"</code> 
      <code>: </code> 
      <code>"node build/build.js"</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>"build:test"</code> 
      <code>: </code> 
      <code>"cross-env NODE_ENV=production env_config=test node build/build.js"</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>"build:pre"</code> 
      <code>: </code> 
      <code>"cross-env NODE_ENV=production env_config=pre node build/build.js"</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>"build:prod"</code> 
      <code>: </code> 
      <code>"cross-env NODE_ENV=production env_config=prod node build/build.js"</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>},</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

在这里，NODE\_ENV最好都设成production，因为在utils.js只做了production一种判定，亲测不会影响各环境API参数。

**第4步：修改config/index.js**

**修改config/index.js文件中build参数，这里的参数会在build/webpackage.prod.conf.js中使用到**

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>build:{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>// Template for index.html</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>// 添加test pre prod 三处环境的配制</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>prodEnv: require(</code> 
      <code>'./prod.env'</code> 
      <code>),</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>preEnv: require(</code> 
      <code>'./pre.env'</code> 
      <code>),</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>testEnv: require(</code> 
      <code>'./test.env'</code> 
      <code>),</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>//下面为原本的内容，不需要做任何个性</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>index:path.resolve(__dirname,</code> 
      <code>'../dist/index.html'</code> 
      <code>),</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

**第5步：在webpackage.prod.conf.js中使用构建环境参数**

对build/webpackage.prod.conf.js文件进行修改，调整env常量的生成方式。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>// 个性env常量的定义</code> 
     </div> 
     <div> 
      <code>// const env = require('../config/prod.env')</code> 
     </div> 
     <div> 
      <code>const env = config.build[process.env.env_config+</code> 
      <code>'Env'</code> 
      <code>]</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

**第6步：调整build/build.js**

**删除process.env.NODE\_ENV的赋值，修改spinner的定义，调整后的内容如下：**

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>'use strict'</code> 
     </div> 
     <div> 
      <code>require(</code> 
      <code>'./check-versions'</code> 
      <code>)()</code> 
     </div> 
     <div> 
      <code>// 注释掉的代码</code> 
     </div> 
     <div> 
      <code>// process.env.NODE_ENV = 'production'</code> 
     </div> 
     <div> 
      <code>const ora = require(</code> 
      <code>'ora'</code> 
      <code>)</code> 
     </div> 
     <div> 
      <code>const rm = require(</code> 
      <code>'rimraf'</code> 
      <code>)</code> 
     </div> 
     <div> 
      <code>const path = require(</code> 
      <code>'path'</code> 
      <code>)</code> 
     </div> 
     <div> 
      <code>const chalk = require(</code> 
      <code>'chalk'</code> 
      <code>)</code> 
     </div> 
     <div> 
      <code>const webpack = require(</code> 
      <code>'webpack'</code> 
      <code>)</code> 
     </div> 
     <div> 
      <code>const config = require(</code> 
      <code>'../config'</code> 
      <code>)</code> 
     </div> 
     <div> 
      <code>const webpackConfig = require(</code> 
      <code>'./webpack.prod.conf'</code> 
      <code>)</code> 
     </div> 
     <div> 
      <code>// 修改spinner的定义</code> 
     </div> 
     <div> 
      <code>// const spinner = ora('building for production...')</code> 
     </div> 
     <div> 
      <code>var</code> 
      <code>spinner = ora(</code> 
      <code>'building for '</code> 
      <code>+ process.env.NODE_ENV + </code> 
      <code>' of '</code> 
      <code>+ process.env.env_config+ </code> 
      <code>' mode...'</code> 
      <code>)</code> 
     </div> 
     <div> 
      <code>spinner.start()</code> 
     </div> 
     <div> 
      <code>//更多的其它内容，不需要做任何调整的内容 ...</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

最后：

**执行npm run build:test打包的就是测试环境**

**执行npm run build:prod打包的就是生产环境**

[vue]: https://www.cnblogs.com/woshidouzia/p/9345706.html